Question

我在'magento'购物车页面中有以下HTML页面，如果我有相同的类，我如何在delete的click事件（class = cart_delete_bt）上获得相关的产品名称（例如.Yamaha PSRE343）所有产品，在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>

点击删除按钮我希望突出显示文字。

enter image description here

我在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

尝试使用以下代码获取点击删除按钮的产品名称 -

您可以使用tr获取父.closest()，然后使用find find('.item-product-name .cart_prod_name .RemovedProduct_Track')获取产品名称锚。然后使用.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

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

1 个答案: