2011-12-16 9 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を動的に委譲し、多くの変数 "id"をjQueryの関数でggetherに委譲できますか?

  1. どのように私は二MouseEnterイベントにid属性を変更し、新たなDIVの力学「ID」を委任することができますか?
  2. セレクタをid^=leftまたはid^=rightと同じデリゲート機能で組み合わせたいとします。それを作る方法はありますか?たとえば:

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

しかし、それはうまく動作しないことができる...どのように私はそれを修正するか、2つのデリゲート機能に書き込むが、他の方法を持つことができませんか?

答えて

1

私はあなたが任意のDOM要素のIDを変更しないことを示唆している - 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/

+0

あなたの助けを誠実にお寄せいただきありがとうございます!これは非常に良い仕事であり、とてもうまくいきます!ありがとうございます!私はウェブでコンソールの使い方を勉強しようとします。 –

関連する問題