2011-12-16 1 views
0
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> 

Вопросы, являются:Могу ли я динамически делегировать идентификатор переменной и делегировать множество переменных «id» toggether с помощью функции jQuery?

  1. Как я могу передать динамический «идентификатор» на новый DIV, который изменил идентификатор атрибута на второе событие MouseEnter?
  2. Я хочу комбинировать селектор с id^=left или id^=right в той же функции делегата. Может ли любой способ сделать это? Например:

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

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

ответ

1

Я хотел бы предложить, что вы не изменить идентификатор любого элемента 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 
    } 
}); 

Incase вы не знаете - 0 Командарегистрирует вывод на консоль javascript браузера отладчика (firebug).

документы

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

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

+0

Спасибо за вашу помощь искренне! Это очень хорошая работа и работает очень хорошо! Большое спасибо! Я попытаюсь изучить использование консоли в Интернете. Спасибо! –

Смежные вопросы