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

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

<强> HTML

onclick

<强>的jQuery

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

修改

检查此变通方法，基本上，通过执行$(document).on('click', 'a', function() { var product_id = $(this).attr('id'); // Or any other attribute cart.add(product_id); });删除内联removeInlineHandlers属性并分配一个调用onclick函数的事件处理程序来传递单击的元素：

＆＃13;
＆＃13;
add
＆＃13;
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();
＆＃13;
＆＃13;
＆＃13;

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>

理想的是使用类添加事件监听器。像：

$(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>

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

2 个答案: