javascript - jQuery onclick 删除 i++

Question

我有很多由 del1、del2、del3 等定义的项目。

如何将我的 .click 设置为 .del1 delete(1) 和 .del2 delete(2)？

<li>
    <a href="http://www." target="new">http://www.</a>
    <a href="#">
        <img class="del1" src="images/page_white_delete.png" title="Delete">
    </a>
</li>
<li>
    <a href="http://www." target="new">http://www.</a>
    <a href="#">
        <img class="del2" src="images/page_white_delete.png" title="Delete">
    </a>
</li>

jQuery：

$(".del1").click(function(){
   favs.webdb.deleteTodo(1);
});

旧代码是这样写的：

    <li><a href="http://www.tes.com" target="new">http://www.tes.com</a>
<a href="javascript:void(0);" onclick="favs.webdb.deleteTodo(1);">
<img src="images/page_white_delete.png" title="Delete">
</a></li>

我还认为我可能需要进行 jquery 实时点击，因为 webdb 在页面完成加载之前不会加载。

Answer 1

使用泛型类和data-*属性：

<img class="del" data-number="1" src="images/page_white_delete.png" title="Delete">
<img class="del" data-number="2" src="images/page_white_delete.png" title="Delete">


$(".del").click(function(){
    favs.webdb.deleteTodo($(this).data("number"));
});

Answer 2

如果无法修改 HTML，可以从class名称中提取数字：

$('img[class^="del"]').click(function() {
  var class = $(this).attr('class');
  var number = parseInt(class.slice(3), 10);

  favs.webdb.deleteTodo(number);
});

Answer 3

你最好设置一个特殊的属性，如：

<img class="del" data-node-id="1" src="images/page_white_delete.png" title="Delete">

然后：

 $('img.del').click(function(){ 
      favs.webdb.deleteTodo( $(this).data('node-id') ); 
 })