Question

我有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

点击事件

你能帮忙吗？

Answer 1

我会使用类选择器将click事件绑定到ToggleChatBoxGrowth，然后遍历DOM以接收父ID。

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

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

Answer 2

$('.ToggleChatBoxGrowth', '[id^="chatbox_"]').on('click', function() {
  ChatBox.ToggleChatBoxGrowth( $(this).closest('[id^="chatbox_"]').attr('id') );
});

Answer 3

试试这个：http://jsfiddle.net/MSxhy/

ChatBox.ToggleChatBoxGrowth($(this).parents('[id="Chatbox'+id+'"]').attr('id'));

Answer 4

根据您的描述，您似乎正在使用循环来绑定事件。这是正确的吗？如果是这样，“id”将具有循环的最后一次迭代的值。如果你想保留它，你可以通过闭包来实现它

while(id<3){
  (function(){
      var localId = id;
      $('#chatbox_' + id+ ' > .chatboxhead > .chatboxoptions > .ToggleChatBoxGrowth').click(function ()
       {
          ChatBox.ToggleChatBoxGrowth(localId);
       });
   })();
   id++;
}

使用jQuery将事件绑定到特定id内的类

4 个答案: