从 javascript 中的按钮检索名称值

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">

呈现下拉列表，单击时会附加一个新的 class，称为 is-dropped，因此一旦单击 [=15=，父级 div 将看起来像这样]

现在使用 Javascript 我正在尝试检索 name="toggle-segment-cagetories-list"，我们将在 DTM (Adobe Tag Manager) 中将其用作 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

如果你想使用自己的数据属性，你需要以 'data':

开头你的属性名称

   <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

Answer 2

使用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>

从 javascript 中的按钮检索名称值

Retrieve name value from button in javascript

javascript

adobe

adobe-analytics