javascript - 如果单击具有相似类的元素，则获取元素属性

Question

我在“magento”购物车页面中有以下 HTML 页面，如果我有相同的类所有产品，在 javascript 中，以便在 Google 跟踪代码管理器的宏中使用它。

<tr class="check odd">
   <td class="item-product-img"><a href="http://example.com/irig-keys" title="IK Multimedia iRig Keys " class="cat_prod_img"></a></td>
   <td class="item-product-name">
      <h2 class="cart_prod_name">
         <a class="RemovedProduct_Track" href="http://example.com/irig-keys">IK Multimedia iRig Keys </a>
      </h2>
   </td>
   <td class="item-product-price-price">
      <span class="cart-price">
      <span class="price">$139.00</span>                
      </span>
   </td>
   <td class="a-center item-product-qty" width="75">
      <div class="qty_input"><input name="cart[3038][qty]" id="cart[3038][qty]" value="1" size="4" title="Qty" class="input-text qty" maxlength="12"></div>
   </td>
   <td>
      <span class="cart-price">
      <span class="price">$139.00</span>                            
      </span>
   </td>
   <td class="a-center item-product-edit">
      <!--<a href="http://example.com/checkout/cart/configure/id/3038/" title="Edit item parameters" class="cart_edit_bt"></a>-->
   </td>
   <td class="a-center item-product-delete last">
      <a href="http://example.com/checkout/cart/delete/id/3038/uenc/aHR0cDovL3BhdHNtdXNpYy5leGFuYW5vMS5jb206ODA4MC9jaGVja291dC9jYXJ0Lw,,/" title="delete" class="cart_delete_bt"></a>
   </td>
</tr>
<tr class="check odd">
   <td class="item-product-img"><a href="http://example.com/psre343" title="Yamaha PSRE343" class="cat_prod_img"></a></td>
   <td class="item-product-name">
      <h2 class="cart_prod_name">
         <a class="RemovedProduct_Track" href="http://example.com/psre343">Yamaha PSRE343</a>
      </h2>
   </td>
   <td class="item-product-price-price">
      <span class="cart-price">
      <span class="price">$279.00</span>                
      </span>
   </td>
   <td class="a-center item-product-qty" width="75">
      <div class="qty_input"><input name="cart[3040][qty]" id="cart[3040][qty]" value="1" size="4" title="Qty" class="input-text qty" maxlength="12"></div>
   </td>
   <td>
      <span class="cart-price">
      <span class="price">$279.00</span>                            
      </span>
   </td>
   <td class="a-center item-product-edit">
   </td>
   <td class="a-center item-product-delete last">
      <a href="http://example.com/checkout/cart/delete/id/3040/uenc/aHR0cDovL3BhdHNtdXNpYy5leGFuYW5vMS5jb206ODA4MC9jaGVja291dC9jYXJ0Lw,,/" title="delete" class="cart_delete_bt"></a>
   </td>
</tr>

点击删除按钮我想让文本突出显示。

我在jquery中试过如下

jQuery('.cart_delete_bt').closest('.check').find('.RemovedProduct_Track').html();

我也尝试过使用以下 jquery

jQuery('.cart_delete_bt').first(1).parent().parent().first(1).children().children().attr('title');

但现在我必须在 javascript 中完成它才能在 GTM 中实现它。请帮忙。

Answer 1

尝试下面的代码来获取点击删除按钮的产品名称 -

您可以使用 .closest() 获取父 tr，然后使用 find find('.item-product-name .cart_prod_name .RemovedProduct_Track') 获取产品名称 anchor 。然后使用.text()读取产品名称。

jQuery('.cart_delete_bt').click(function(){
 var productName = $(this).closest('tr').find('.item-product-name .cart_prod_name .RemovedProduct_Track').text();
  alert(productName);
});

JSfiddle DEMO

编辑 -

要使用 javascript 实现相同的效果，您可以遵循以下代码

如下所示创建一个javascript函数

function deleteProduct(deleteButton)
{
  var parentNode = deleteButton.parentNode.parentNode;
   var productName = parentNode.getElementsByClassName("RemovedProduct_Track")[0].innerHTML;
   alert(productName);
}

像下面这样在删除按钮上调用上面的函数

<a onclick="deleteProduct(this);" href="http://example.com/checkout/cart/delete/id/3038/uenc/aHR0cDovL3BhdHNtdXNpYy5leGFuYW5vMS5jb206ODA4MC9jaGVja291dC9jYXJ0Lw,,/" title="delete" class="cart_delete_bt"></a>

JSFiddle Demo