在函数内检测哪个元素称为函数而不将其作为参数传递？

Question

这是我的 html 标记：

<a onclick="cart.add('10');" class="product-10">Add to cart</a>
<a onclick="cart.add('11');" class="product-11">Add to cart</a>
<a onclick="cart.add('12');" class="product-12">Add to cart</a>

这是我的 javascript 对象：

var cart = {
    'add': function(product_id) {
        //What I want console.log(element_that_was_clicked.attr('class'));
    }
}

有没有办法在不编辑 html 标记的情况下检测哪个 a 调用了 cart.add？

更新

a 标签没有 class，我添加那些类只是为了演示，实际上我需要 a 对象本身，因为我想访问它下一个兄弟姐妹，我的标记是这样的：

<div><a onclick="cart.add('10');">Add to cart</a><input type="text" name="quantity" /></div>

我想要：

var cart = {
    'add': function(product_id) {
        //What I want console.log(element_that_was_clicked.next().val());
    }
}

Answer 1

首先删除内联onclick（这是不好的做法）并注册一个事件侦听器：

HTML

<a id="10" class="product-10">Add to cart</a>

jQuery

$(document).on('click', 'a', function() {
   var product_id = $(this).attr('id'); // Or any other attribute
   cart.add(product_id);
});

编辑

检查这个解决方法，基本上，通过执行 removeInlineHandlers 删除内联 onclick 属性并分配一个事件处理程序调用 add 函数传递被点击的元素:

function removeInlineHandlers() {
  $('a').each(function() {
    var that = $(this);
    var thisId = that.attr('onclick').match(/\d+/);    
    that.removeAttr('onclick')        
        .on('click', function() {
           cart.add(thisId, that);
        });
  })
}

var cart = {
    'add': function(product_id, elem) {
        alert('Added id: ' + product_id + ' with quantity of: ' + elem.next('input').val());
    }
}

removeInlineHandlers();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a onclick="cart.add('10');">Add to cart</a><input type="text" name="quantity" />
<a onclick="cart.add('11');">Add to cart</a><input type="text" name="quantity" />
<a onclick="cart.add('12');">Add to cart</a><input type="text" name="quantity" />

Answer 2

最好或理想的方法是使用 jQuery 事件侦听器。就个人而言，我会找到一种方法来更改 HTML。

但是如果您真的不能更改HTML，您可以使用onclick属性作为选择器。这是不好的做法。

类似于：

var cart = {
  'add': function(product_id) {
    //$("[onclick=\"cart.add('" + product_id + "');\"]") <-- Getting the clicked a using onclick attribute
    $("[onclick=\"cart.add('" + product_id + "');\"]").next().val("TEST");
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div><a onclick="cart.add('10');">Add to cart</a><input type="text" name="quantity" /></div>
<div><a onclick="cart.add('11');">Add to cart</a><input type="text" name="quantity" /></div>
<div><a onclick="cart.add('12');">Add to cart</a><input type="text" name="quantity" /></div>

理想情况是使用 class 添加事件侦听器。喜欢：

$(function(){
    $(".product").click(function(){
        $(this).next().val("TEST");
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div><a class="product">Add to cart</a><input type="text" name="quantity" /></div>
<div><a class="product">Add to cart</a><input type="text" name="quantity" /></div>
<div><a class="product">Add to cart</a><input type="text" name="quantity" /></div>

在函数内检测哪个元素称为函数而不将其作为参数传递？

Detect which element called a function, within function without passing it as a parameter?

javascript

jquery

opencart