Question

我有这个：

$(document).on("click","#imgCancel",function(){
   $("#tbl_zones td").click(function(){
      editTables("#tbl_zones td",this)
   })
})

我正在尝试使该函数更通用，以便它可以在多个表上工作。 imgCancel在表格内部，我正在制作的所有表格中都会有imgCancel。

我考虑过更换第二行：

$(document).on("click","#imgCancel",function(){
   $(this).closest('table').find('td').click(function(){
      editTables("#tbl_zones td",this)
   })
})

但它没有用，而且我也不知道要把什么作为editTables的第一个参数（它应该引用当前表中的所有td）。

编辑：修改jknaack的jsfiddle，我最终得到了这个：

$(document).on("click","#imgCancel",function(){
    var tblID = $(this).closest('table').attr('id')
    $("#"+tblID+" td").click(function(){
        editTables("#"+tblID+" td",this)
    })
})

Answer 1

问题是文档中的id必须是唯一的，而是使用class属性。

w3c id属性指定HTML元素的唯一ID（id属性值在HTML文档中必须是唯一的。）

w3c - ID Attribute

Answer 2

只使用内部id（假设它包含td元素）

$(document).on("click","#tbl_zones td", function(){
     editTables(this);
});

函数调用中的“this”将是单击的td元素。

Answer 3

如果我找到了你，我认为你可以使用一些apporch，你可以将可点击元素中的新选择器作为数据属性传递。

很难知道你的HTML会是什么样子，所以我只是举了一个例子。当然，您可以自定义选择器，仅在单击的元素内或在壁橱中选择。

JS代码：

$(document).on("click",".actionbuttons",function(){
   var selectedElements = $($(this).data("selector"));
    selectedElements.css("background","#FF0000");
   $(selectedElements ).click(function(){
        $(this).css("background","#00FF00");
   })
})

HTML示例：

<img class="actionbuttons" src="/" data-selector=".test1"/>
<div class="test1"></div>
<div class="test1"></div>
<div class="test1"></div>
<img class="actionbuttons" src="/" data-selector=".test2"/>

<div class="test2"></div>
<div class="test2"></div>

http://jsfiddle.net/Ft7SB/

Jquery，从关键字“this”到表中的所有td

3 个答案: