Question

我有一个购物车，一旦添加了一个项目，就会出现一个垃圾桶图标。有一个当前的脚本可以工作但它针对页面中的所有'onclick'函数。我只想将它作为目标（垃圾可以一个）。这是图标的代码。

<td class="total">
  <span class="close" style="color:#f00;">
    <i class="fa fa-trash"></i>
  </span>
</td>

现在的JavaScript就像这样：

$( document ).ready(function() {

$('body').on('click','.close', function(){
var here = $(this);
var rowid = here.closest('tr').data('rowid');

Theres更多JavaScript，虽然我只是在开始。

我尝试过类似的东西，但没有任何效果。

$( document ).ready(function() {
  var trash = document.getElementsByClassName("fa fa-trash");
  trash.on('click', '.close', function(){
  var here = $(this);

我不知道自己是否走在正确的轨道上。

Answer 1

替换

var trash = document.getElementsByClassName("fa fa-trash");

带

var trash = $(".fa.fa-trash");

如果您想使用JS来获取元素，请使用document.getElementsByClassName，然后您必须迭代for循环并专门为每个事件绑定事件。

  var trashes = document.getElementsByClassName("fa fa-trash");
  for(var i=0; i< trashes.length; i++) {
     var $trash = trashes[i];

     $trash.on('click', '.close', function() {

    ...
  } // end of for loop

使用querySelectorAll

 var trash = document.querySelectorAll(".fa.fa-trash");
  trash.on('click', ...

Answer 2

如果我理解正确，您只想将click事件绑定到垃圾桶图标？

如果是这样..

$( document ).ready(function() {
   $('body').on('click','.fa.fa-trash', function(){
   var here = $(this);  //This variable now equals the clicked trash element.
   var rowid = here.closest('tr').data('rowid');

此外，在包含jQuery元素的变量前面使用$符号时，最佳做法是。这样你和其他任何阅读代码的人都可以区分元素并知道哪些变量可以执行jQuery方法。

var $here = $(this);

调用某个类/ ID

2 个答案: