0

同じ構造の要素が 3 つあります

<div id="Chatbox1">
    <div class="chatboxhead">            
        <div class="chatboxoptions">
            <a href="javascript:void(0)" class="ToggleChatBoxGrowth" title="Minimize chat box">-</a>
        </div>
    </div>                
</div>

唯一の違いは、それぞれに異なる ID (Chatbox1、Chatbox2、Chatbox3) があることです。

「Click」イベントを.ToggleChatBoxGrowthそれぞれのクラスにバインドしようとしました：

$('#chatbox_' + id + ' > .chatboxhead > .chatboxoptions > .ToggleChatBoxGrowth').click(function ()
    {
        ChatBox.ToggleChatBoxGrowth(id);
    });

しかし問題は、それらすべてが同じクリック イベントによってバインドされていることです。
そのため、クリックするChatBox1とクリックイベントが発生しますid = ChatBox3

手伝ってくれますか？

4

4 に答える 4

4

ToggleChatBoxGrowthクラスセレクターを使用してクリックをバインドし、DOM をトラバースして親 ID を受け取ります。

$(".ToggleChatBoxGrowth").click(function(){
   var parentId = $(this).parents(".chatboxhead").parent().attr("id");
   ChatBox.ToggleChatBoxGrowth(parentId);
});

例: http://jsfiddle.net/6C2aQ/

于 2013-01-30T10:04:52.850 に答える
2 
$('.ToggleChatBoxGrowth', '[id^="chatbox_"]').on('click', function() {
  ChatBox.ToggleChatBoxGrowth( $(this).closest('[id^="chatbox_"]').attr('id') );
});
于 2013-01-30T10:08:46.813 に答える
1

これを試してください: http://jsfiddle.net/MSxhy/

ChatBox.ToggleChatBoxGrowth($(this).parents('[id="Chatbox'+id+'"]').attr('id'));
于 2013-01-30T10:04:40.147 に答える
0

説明によると、イベントをバインドするためにループを使用しているようです。これは正しいですか？その場合、「id」はループの最後の反復の値になります。あなたがそれを保持したいなら、あなたはクロージャを通してそれをすることができます

while(id<3){
  (function(){
      var localId = id;
      $('#chatbox_' + id+ ' > .chatboxhead > .chatboxoptions > .ToggleChatBoxGrowth').click(function ()
       {
          ChatBox.ToggleChatBoxGrowth(localId);
       });
   })();
   id++;
}
于 2013-01-30T10:05:32.513 に答える