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') ); 
 })

Jquery onclick删除i ++

3 个答案: