在 .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 -callback 函数中？

//更新：我不确定，如果在这种情况下使用 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

发现问题in your fiddle（以及您更新的代码）：

你忘了把var放在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 回调function，而不是使用 .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前少了两个#