Question

在Google跟踪代码管理器中，使用元素，元素类，元素父类来触发代码非常容易。不幸的是，在这种情况下，我想要刮掉一个只有相同的元素。

因此，当人们点击链接“删除”（class = deleteItem）时，我想抓取url_product_id（粗体）。

我已经尝试过这么多，但无法弄清楚如何实现这一目标。我希望有人可以帮助我。

<td align="center">
   <span class="selquantity menosdis"></span>
   <span class="selquantity plus"></span>
   <input class="urlProductId" type="hidden" name="url_product_id" value="113293">
   <input class="urlQuantity" type="text" name="url_quantity" value="1" readonly="readonly">
   <br>
   <a style="cursor: pointer" class="deleteItem">delete</a>
</td>

Answer 1

假设您希望在事件处理程序中完成此操作，可以使用parentNode和querySelector来实现目标：

var myClickHandler = function(event) {
   var productId = event.target.parentNode.querySelector('. urlProductId').value;
   // do stuff with productId
}

或者使用jQuery：

$('.deleteItem').on('click', function() {
   var productId = $(this).prev('.urlProductId').val();
});

Answer 2

这是一个jQuery方法（自己修改和测试），你可以在GTM Custom Javascript变量中执行此操作：

function(){
   var ce = {{Click Element}}; // get the clicked element
   if ($(ce).length > 0){
      return $(ce).closest('td').find('.urlProductId').attr('name');
   }
   return undefined;
}

这里的前提是你的元素都嵌套在<td>元素下，而你所做的只是点击被点击的元素并抓取你感兴趣的元素。

Answer 3

这类似于Rob的回答，但也考虑了代码是否被移动到其他div等等。因为人们一直在更新他们的UI。随着产品的成熟，这应该更具可持续性。当然，如果您更改为类似BootStrap数据表的内容，您将需要观看.closest（）调用。

$(".deleteItem").on("click", function() {
  var getClosestProdID = $(event.target).closest('td').find('.urlProductId');

  // Just for display of the value
  alert("Our closest selected value is: " + getClosestProdID.val());
});

JS Fiddle

如何在Javascript中选择第N个PreviousSibling？

3 个答案: