Выбор узла в Рафаэле / JavaScript - PullRequest
Новая
       2

Выбор узла в Рафаэле / JavaScript

1 голос
/ 28 сентября 2010

Следующий код в основном работает (благодаря хорошему ответу пару дней назад!) Все, кроме последнего чуть-чуть: 

things.square[1].node.setAttribute("id","clicker");
$("#clicker").click(function(){
    $("#canvas_things1").fadeOut();
    $("#canvas_things2").fadeIn();
});

Я думаю, что проблема в этой строке: 

things.square[1].node.setAttribute("id","clicker");

Я бы подумал, что square [1] .node будет работать, но, похоже, нет. Может кто-то определить, что не так? 

<script type="text/javascript" charset="utf-8">
    $("document").ready(function() {
        var RM  = Raphael("canvas", 1000, 500);

        var attr = {     // for the visible shapes
            fill: "#bbb",      "fill-opacity": 1,
            stroke: "#222",    "stroke-width": 0.3,
        };
        var attr2 = {    // for the invisible hovering areas
            fill: "green",     "fill-opacity": 0.0,
            stroke: "red",     "stroke-width": 0,
        };
        var things = {};
        /* Square */    things.square     = [ RM.path("m 154.21525,71.431259 74.32805,0 0,70.496711 -74.32805,0 0,-70.496711 z").attr(attr),
                                              RM.path("m 271.25132,77.933263 58.07304,0 0,56.409037 -58.07304,0 0,-56.409037 z").attr(attr2)   ];
        /* Triangle */  things.triangle   = [ RM.path("m 154.02932,222.44063 36.78089,-58.23641 34.48208,58.2364 -71.26297,1e-5").attr(attr),
                                              RM.path("m 271.25132,165.71032 58.07304,0 0,56.40903 -58.07304,0 0,-56.40903 z").attr(attr2)   ];
        for (var shape in things) {
            shape[0].color = Raphael.getColor();
            (function (shape, sh) {
                shape[1][0].onmouseover = function () {
                    shape[0].animate({fill:shape[0].color, stroke:"#ccc"}, 500);
                    document.getElementById(sh)[0].style.display = "block";
                    shape[0].toFront();   R.safari();
                };
                shape[1][0].onmouseout = function () {
                    shape[0].animate({fill:"#bbb", stroke:"#222"}, 500);
                    document.getElementById(sh)[0].style.display = "none";
                    shape[0].toFront();   R.safari();
                };
            })(things[sh], sh);
        } // end for every member of things

        things.square[1].node.setAttribute("id","clicker");
        $("#clicker").click(function(){
            $("#canvas_things1").fadeOut();
            $("#canvas_things2").fadeIn();
        });

    }); // end the document ready function
</script>

Ответы [ 2 ]

1 голос
/ 14 октября 2010

Атрибут id установлен правильно.

Попробуйте это с помощью этого jQuery (нажмите на 1-й красный квадрат)

Обратите внимание, что мне пришлось вырвать твой цикл for.Это связано с тем, что самовыполняющаяся анонимная функция вызывала ошибку времени выполнения из-за вызова с неопределенными переменными.

sh никогда не определяется, но используется здесь: 

        })(things[sh], sh);                               // sh is never defined!
    } // end for every member of things

Iзаменил бы цикл for, но я не понимаю, что вы пытаетесь сделать.

В любом случае, я бы предложил использовать пользовательский обработчик событий Raphael .hover().

PS: следите за своими ненужными комами (у вас их 4): 

    stroke: "#222",    "stroke-width": 0.3,                 // <== Trailing comma
};
0 голосов
/ 02 октября 2010

Я думаю, это потому, что things.square не отображается ни на один элемент в SVG, когда у вас есть несколько путей.Есть два подхода, которые должны работать:

  1. Перебирать каждый из элементов пути в things.square и применять функцию щелчка к каждому из них (тогда не удастся использовать атрибут id).
  2. Используйте групповое дополнение , чтобы поместить все пути в элемент <g> в SVG, а затем примените к нему свою функцию.
...