Как изменить атрибут тегов данных с событием onclick?

Question

Я хочу, чтобы атрибут data-tags на карте Storepoint был «надежда для мужчин», если выбран div «Исцеление для мужчин» и «предательство и выше», если выбран div «Healing for Women».Я пытался просматривать посты с похожими целями, но я не знаю достаточно об условном программировании, чтобы понять это.

<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

Запишите новое значение в атрибут data:

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>

Answer 2

Вы можете попробовать:

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