更改 .click() 上的不同元素

Question

我不确定如何以正确的方式使用 .click。

我查看了手册（http://api.jquery.com/click/），但无法找到我的问题的答案：

我正在使用 JS 生成一个 div 结构，如下所示：

<div>
   <img id='img_1' src="click.gif">
</div>
<div id='content_1'> Text</div>

很多这些块都是使用以下函数生成的。最后，每个图像都会获得一个单击事件来更改相关文本的 css：单击 img_1 更改 content_1 上的 css。 我尝试这个代码（简化版本）：

$.each(data, function(selector,content) {
     id=prepare(selector);
     $('#boxDiv').append('    <div>\
                               <img id="img_'+id+'" src="click.gif">\
                             </div>\
                             <div id="content_'+id+'"> Text</div>');
     $('#img_'+id).click(function(a) {
                         $('#content_'+id).css('height','100px');});
});

但是这个代码不能按照我的要求工作。

每个 'img_'+id 元素都会获取他相关的点击事件（到目前为止，所以上帝） 但该函数并没有改变相关'content_'+id的css！最后一个内容元素始终会发生变化。 看起来，.click回调函数在添加点击事件时没有获取id，而是在执行回调函数时获取。此时，id（当然）始终是最后一个元素。

所以问题是，如何将当前（相关）id带入 .click 回调函数中？

//更新：我不确定，在这种情况下使用 live() 是否有帮助：我尝试了这个，但没有成功。 问题不在于缺少点击事件。问题是，每次点击时，都会使用最后一个 id 触发回调函数。 例子。 生成的内容是这样的：

<div>
   <img id='img_1' src="click.gif">
</div>
<div id='content_1'> Text</div>
<div>
   <img id='img_2' src="click.gif">
</div>
<div id='content_2'> Text</div>
<div>
   <img id='img_3' src="click.gif">
</div>
<div id='content_3'> Text</div>

JS代码为img_1绑定了一次点击事件，为img_2绑定了一次点击事件，为img_3绑定了一次点击事件。 我将回调函数的内容更改为：

$('#expand_'+id).live('click',function() {console.info(id);});

所以我看到ID的内容：通过单击img_1或img_2 id是3。可能是因为，3是最后一个值每个循环。那么如何在回调中获取相关的id呢？

感谢您提供任何帮助。

Answer 1

在您的小提琴中发现了问题（以及您更新的代码）：

您忘记放入 var< /code> 在 id 前面，这使其成为全局的。所有事件处理程序都引用相同的id，其值是上次迭代中的值。

将其声明为

var id = ....;

本地化。

---

也就是说，我将使用 jQuery 创建所有元素：

$.each(data, function(selector,content) {
     var id = selector;

     var $img = $('<span />', {
         id: 'img_' + id,
         text: 'click'
     }).click(function() {
          $('#content_'+id).css('height','100px');
     });

     var $div = $('<div />', {
         id: 'content_' + id,
         text: 'Text'
     });

     $('<div />').append($img).append($div).appendTo('#boxDiv');
});

还有其他方法来查找 #content_X 元素。在您的结构中，此元素始终是图像父级的下一个同级元素。因此，您可以在事件处理程序内搜索具有此 ID 的元素：

$(this).parent().next().css(...);

或者甚至将事件处理程序绑定到父 div，而不是直接绑定到图像。

Answer 2

单击事件处理程序将有权访问 id （和 content）变量，如在父函数中定义的那样。在 JavaScript 中，内部函数可以访问定义它们的函数的所有变量。

问题很简单，您在几个 jQuery 选择器字符串中缺少 # ID 选择器：

$('#boxDiv').append('...');
//some code removed
$('#content_' + id).css('height', '100px');

Answer 3

您应该使用 .live 回调函数，而不是使用 .click 回调函数。引用 jquery 文档：

“描述：为现在和将来与当前选择器匹配的所有元素附加一个处理程序。”

试试这个：

$.each(data, function(id,content) {
 $('boxDiv').append('    <div>\
                           <img id="img_'+id+'" src="click.gif">\
                         </div>\
                         <div id="content_'+id+'"> Text</div>');
 $('#img_'+id).live('click', function() {
                     $('content_'+id).css('height','100px');});
});

Answer 4

你不是说吗

$.each(data, function(id,content) {
     $('#boxDiv').append('    <div>\
                               <img id="img_'+id+'" src="click.gif">\
                             </div>\
                             <div id="content_'+id+'"> Text</div>');
     $('#img_'+id).click, function(a) {
                         $('#content_'+id).css('height','100px');
     });
});

？ ID前少了两个#