如何返回兄弟元素的innertext

Question

在GTM中，我试图返回单击元素的兄弟元素的内部文本。

<div class="repair-item-n ">
<div class="repair-slide--54894d33-6c88-488f-95d7-3ec9b6a3ade4">
<div class="restoration_wrap text-center">
<img class="restoration-image">
</div>
<p class="title">Bags</p>
</div>
</div>

例如，点击类" restore -image"我想返回值" bag "

这个HTML在页面上多次出现，并带有诸如"Shoes"， "Hats"等等，所以我想知道每一个点击，这将是各自的文本标题"类

Answer 1

试试这个:

var images = document.querySelectorAll('.restoration-image');
images.forEach(function (image) {
image.addEventListener('click', function (event) {
var parent = this.parentNode;
var nextSibling = parent.nextElementSibling;
alert(nextSibling.innerText)
})
}); 

Answer 2

这应该适用于GTM自定义JavaScript变量。

function getImgTitle() {
if({{event}} === 'gtm.click') {
var image = {{Click Element}};
var parent = image.parentNode,
nextSibling = parent.nextElementSibling;
return nextSibling.innerText;
}
}

Answer 3

我会在自定义Javascript变量中这样做:

Click - Repair Item Title

function() {
var clickedEl = {{Click Element}};
if (!clickedEl) return;
// Find the mutual parent element
var repairItemEl = clickedEl.closest(".repair-item-n");
if (!repairItemEl) return;
var titleEl = repairItemEl.querySelector(".title");
if (!titleEl) return;
return titleEl.innerText
}}