如何使用 onclick 事件更改数据标签属性？

Question

如果选择 "Healing for Men" div，我希望 Storepoint 地图上的数据标签属性为 "hope-for-men"，如果选择 "Healing for Women"，则为 "betrayal & beyond" div 已选中。我试过查看具有类似目标的帖子，但我对条件编程的了解还不够多，无法弄清楚。

<div class="spouse-men-box eight columns alpha center">
<div class="groupboxes" onclick="openGroup(event, 'spouse-men-content')">
<h3 class="mB25 white">Healing for Men</h3>
</div>
</div>
<div class="spouse-women-box eight columns omega center">
<div class="groupboxes" onclick="openGroup(event, 'spouse-women-content')">
<h3 class="mB25 white">Healing for Women</h3>
</div>
</div>
<div id="storepoint-container" data-tags="hope for men" data-map-id="158752ddce0df0"></div><script>(function(){var a=document.createElement("script");a.type="text/javascript";a.async=!0;a.src="https://cdn.storepoint.co/api/v1/js/158752ddce0df0.js";var b=document.getElementsByTagName("script")[0];b.parentNode.insertBefore(a,b);}());</script>

<script>// <![CDATA[
function openGroup(evt, groupName) {
var i, groupcontent, groupboxes;

groupcontent = document.getElementsByClassName("groupcontent");
for (i = 0; i < groupcontent.length; i++) {
groupcontent[i].style.display = "none";
}

groupboxes = document.getElementsByClassName("groupboxes");
for (i = 0; i < groupboxes.length; i++) {
groupboxes[i].className = groupboxes[i].className.replace(" active", "");
}

document.getElementById(groupName).style.display = "block";
evt.currentTarget.className += " active";
}
// ]]></script>

Answer 1

你可以试试：

document.getElementById('storepoint-container') .setAttribute('data-tags', groupName === 'spouse-men-content' ? 'hope-for-men' : 'betrayal & beyond')

Answer 2

向数据属性写入一个新值：

document.getElementById('storepoint-container').dataset.tags = 'some new value'

你必须在你的 openGroup 函数中完成它（我最后完成了，评论了所有不起作用的东西）：

function openGroup(evt, groupName) {
var i, groupcontent, groupboxes;

// not working:
// groupcontent = document.getElementsByClassName("groupcontent");
// for (i = 0; i < groupcontent.length; i++) {
//   groupcontent[i].style.display = "none";
// }

groupboxes = document.getElementsByClassName("groupboxes");
for (i = 0; i < groupboxes.length; i++) {
groupboxes[i].className = groupboxes[i].className.replace(" active", "");
}

//not working: document.getElementById(groupName).style.display = "block";
evt.currentTarget.className += " active";


// this is the relevant part:
var storepointContainer = document.getElementById('storepoint-container');
if (groupName === 'spouse-men-content') {
  storepointContainer.dataset.tags = 'hope-for-men';
} else {
  storepointContainer.dataset.tags = 'betrayal & beyond';
}
}

<div class="spouse-men-box eight columns alpha center">
<div class="groupboxes" onclick="openGroup(event, 'spouse-men-content')">
<h3 class="mB25 white">Healing for Men</h3>
</div>
</div>
<div class="spouse-women-box eight columns omega center">
<div class="groupboxes" onclick="openGroup(event, 'spouse-women-content')">
<h3 class="mB25 white">Healing for Women</h3>
</div>
</div>
<div id="storepoint-container" data-tags="hope for men" data-map-id="158752ddce0df0"></div>

如何使用 onclick 事件更改数据标签属性？

How do I change a data-tags attribute with an onclick event?

javascript

onclick

custom-data-attribute