Question

如果要选择“为男性治疗” div，那么我希望Storepoint映射上的data-tags属性为“希望男性”，如果选择了“为女性治疗” 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

为数据属性写一个新值：

{% block header %} {% block head_javascript %} <script type="application/ld+json"> { "@context": "http://schema.org", "@type": "WebSite", "url": "", "description": "", "name": "" } </script> {% endblock%} {% endblock %} {% block bodyContent %} {# TAG | SELECTION #} <div> <h2> {{ 'title' }} </h2> <p> {{ 'desc' }} </p> </div> <div> <div> <h1>{{ 'create.title' }}</h1> <p> {{ 'create.desc' }} </p> <div> <div> {% set texte %}{{ 'create.step.one' }}{% endset %} {% set svg %}svg:cursor-mkp.svg.twig{% endset %} {% set number %}1{% endset %} {{ include(':step.html.twig') }} </div> <div> {% set texte %}{{ 'create.step.two' }}{% endset %} {% set svg %}svg:mkp.svg.twig{% endset %} {% set number %}2{% endset %} {{ include('idea-step.html.twig') }} </div> </div> <a href="{{path('path.mkp')}}"> <button>{{ 'create.button' }}</button> </a> </div> </div> {% endblock %}

您必须在您的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';
}
}

如何通过onclick事件更改data-tags属性？

2 个答案: