Question

我有以下HTML：

<div class="dropdown" data-offers-filter-segments="">
  <button class="toggle--dropdown" name="toggle-segment-cagetories-list">
     <span class="dropdown__label" id="dropdown__labelAllCategories">All Categories</span>
  </button>
<div class="dropdown__content" hidden="hidden">

其中会显示一个下拉列表，点击后会附加一个名为is-dropped的新类，因此在div

点击后，父class="dropdown is-dropped"将如下所示

现在使用Javascript我正在尝试检索我们将在name="toggle-segment-cagetories-list"（Adobe跟踪代码管理器）中使用的DTM作为eVar值，但我不确定如何检索该名称值，到目前为止，我有以下javascript：

function hasClass(element, cls) {
    return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1;
}

if(hasClass(document.getElementsByClassName('dropdown')[0], 'is-dropped')){
// Now get the name value ? 
}
else {
  alert("false");
}

现在我对javascript还很陌生，所以如果有人能够了解如何获取名称值并将其传递给DTM，我将非常感激。

Answer 1

使用document.querySelector：

<div class="dropdown is-dropped" data-offers-filter-segments="">
  <button class="toggle--dropdown" name="toggle-segment-cagetories-list">
     <span class="dropdown__label" id="dropdown__labelAllCategories">All Categories</span>
  </button>
<div class="dropdown__content" hidden="hidden">

<script>
var button=document.querySelector('div.is-dropped button.toggle--dropdown');
var name=button&&button.name||'';
alert(name);
</script>

Answer 2

如果您想使用自己的数据属性，则需要使用＆＃39;数据开始您的属性名称：

   <button class="toggle--dropdown" data-name="toggle-segment-cagetories-list">

为了检索属性的值，您可以执行以下示例所示：

   var article = document.getElementsByClassName('toggle--dropdown');
   article[0].dataset.name // article[0] because getting elements by className returns an array

从javascript中的按钮检索名称值

2 个答案: