Могу ли я динамически делегировать переменную id и делегировать много переменных "id" вместе с функцией от jQuery? - PullRequest
Новая
       15

Могу ли я динамически делегировать переменную id и делегировать много переменных "id" вместе с функцией от jQuery?

0 голосов
/ 16 декабря 2011 
var left=10;
var right=50;
$("#leftori").attr("id",left);
$("#rightori").attr("id",right);//change the id

$(document).delegate('div[id^='+left+']', 'mouseenter',function() {
  alert("left ok!");
  var newleft=left+1;
  $("#"+left).attr("id","newleft"};//change the id
  left=newleft;
 }
$(document).delegate('div[id^='+right+']', 'mouseenter',function() {
  alert("right ok!");
  var newright=right+1;
  $("#"+right).attr("id","newright");
  right=right+1;
}

<body>
<div id="leftori" class="div01"></div>
<div id="rightori" class="div01"></div>
</body>

Вопросы:

  1. Как я могу делегировать динамический "id" для нового div, который изменил атрибут id во втором событии mouseenter?

  2. Я хочу объединить селектор с id^=left или id^=right в той же функции делегата.Можно ли каким-либо способом это сделать?Например:

    $(document).delegate('div[id^='+left+']' || 'div[id^='+right+']' , 'mouseenter',function() {...}

Но это не может работать хорошо ... Как я могу исправить это или нет другого метода, кроме как писать в двух функциях делегата?

1 Ответ

1 голос
/ 16 декабря 2011

Я бы посоветовал вам не изменять идентификатор какого-либо элемента DOM - есть гораздо лучшие способы сохранить «данные» в элементе DOM ....

Как насчет этого:

HTML: 

<div id="container">
   <div id="leftori" class="left"></div>
   <div id="rightori" class="right"></div>
</div>

JavaScript: 

var left=10;
var right=50;
// store the data
$("#leftori").data("num",left);
$("#rightori").data("num",right);

$('#container').on('mouseenter','div',function() { 
    // update the data on mouseenter
    if ($(this).hasClass('left')){
        console.log('left');
        left++;
        $(this).data('num',left);
        console.log(left); 
        // or console.log($(this).data('num')); to access the new number
    } else if($(this).hasClass('right')) {
        console.log('right');
        right++;
        $(this).data('num',right);
        console.log(right);
        // or console.log($(this).data('num')); to access the new number
    }
});

Если вы не в курсе - команда console.log записывает вывод в консоль javascript браузера отладчика ( firebug ).

документы

  • on () -> замена делегата в jQuery 1.7
  • data () -> хранение информации об элементах DOM
  • hasClass () -> проверить, имеет ли элемент DOM определенный класс

Рабочий пример: http://jsfiddle.net/8RhbB/1/

...