выбор узла Рафаэля - PullRequest
Новая
       12

выбор узла Рафаэля

2 голосов
/ 14 июня 2011

У меня есть много ректов, автоматически созданных на холсте Raphael, для простоты этот код использует только два: 

for (i = 0; i < 2; ++i) {
    var square = paper.rect(0 + 100*i, 0, 70, 70);
    square.node.setAttribute('id', '_' + i);
    square.node.setAttribute('class', 'foo');
}

, который создает этот фрагмент ниже (как видно из источника выбора вида в Firefox): 

<svg height="560" width="560" version="1.1" xmlns="http://www.w3.org/2000/svg"><desc>Created with Raphael</desc><defs></defs><rect class="foo" id="_0" stroke="#000" fill="none" ry="0" rx="0" r="0" height="70" width="70" y="0" x="0"></rect><rect class="foo" id="_1" stroke="#000" fill="none" ry="0" rx="0" r="0" height="70" width="70" y="0" x="100"></rect></path></svg>

Класс css указывает цвет для заполнения.Я хотел бы изменить класс каждого прямоугольника, индивидуально, используя функцию щелчка.Мне нужно что-то вроде: 

function change_class() {
    //something here
}

Из всего, что я прочитал, это делается с помощью .node, но здесь у меня нет отдельной переменной для каждого rect, учитывая, что square перезаписывался на каждой итерации цикла for().

Один из способов сделать это состоит в том, чтобы поместить все ректы в массив, например: 

squares = [];
for (i = 0; i < 2; ++i) {
    var square = paper.rect(0 + 100*i, 0, 70, 70);
    square.node.idx = i;
    square.node.setAttribute('class', 'foo');
    squares.push(square);
}

Я мог бы затем изменитькласс напрямую через: 

squares[0].node.setAttribute('class', 'other');

НО ... Я до сих пор не знаю, как это сделать с помощью общей функции change_class() ... Мне нужно что-то вроде: 

$('rect').click(function() {
    change_class(); // the click function should pass "$(this)" to change_class ?
});

Какой будет правильный метод jQuery + Raphael для этого?

Заранее спасибо, Адриан

1 Ответ

2 голосов
/ 07 июля 2011

Если вы хотите щелкнуть само поле, чтобы изменить его цвет, вам не нужен jQuery, вы можете использовать встроенный метод событий Рафаэля и ссылаться на прямоугольник как this, например: 

     rect.click( function () {
        this.node.setAttribute('class', 'newClass');
     });
...