WEB広告運用の困りごとが集まる場所 › コミュニティ › コミュニティ › 選択した回答に応じたコンテンツが出てくる動作を修正したい › 返信先:選択した回答に応じたコンテンツが出てくる動作を修正したい
-
下記 Javascript の調整でいかがでしょうか?
_.setEnquete { }
を下記に置き換えて下さい。
_.setEnquete = function(el) {
const revealArea = el.querySelector(classes.revealArea)
let linkBoxAll = Array.from(el.querySelectorAll(classes.questionItem));
//追加 ↓
const hiddenImages = el.querySelectorAll('.hidden-image');
hiddenImages.forEach((img) => {
img.style.display = 'none';
});
//追加ここまで ↑
el.addEventListener('change', function(e) {
let checkedLength = 0;
let self = e.target
let current = self.closest(classes.questionItem)
let currentNo = Array.prototype.indexOf.call(linkBoxAll, current)
let next;
let scrollPoint = false;
let noScroll = current.classList.contains("no-scroll") ? true : false;
current.classList.remove('not-checked');
// 下記修正と追加 ↓
let currentHiddenImages = Array.from(current.querySelectorAll('.hidden-image'));
let checkedInputs = Array.from(current.querySelectorAll('input'));
if (currentHiddenImages.length && checkedInputs.length) {
checkedInputs.forEach((input) => {
let correspondingImage = currentHiddenImages.find(img => img.dataset.sid === input.dataset.show);
if (correspondingImage) {
if (input.checked) {
correspondingImage.style.display = 'block';
} else {
correspondingImage.style.display = 'none';
}
}
});
}
//修正と追加ここまで ↑
linkBoxAll.forEach(function(linkBox) {
if (linkBox.querySelector('input:checked')) checkedLength++;
})
if (checkedLength === linkBoxAll.length) {
revealArea.classList.remove('is-hidden')
scrollPoint = revealArea.getBoundingClientRect().top + window.pageYOffset
} else if (linkBoxAll.length === currentNo + 1) {
let notChecked = linkBoxAll.filter(linkBox => !linkBox.querySelector('input:checked'));
notChecked.forEach(linkBox => linkBox.classList.add('not-checked'));
scrollPoint = notChecked[0].getBoundingClientRect().top + window.pageYOffset;
noScroll = false;
} else {
next = linkBoxAll[currentNo + 1]
if (next) scrollPoint = next.getBoundingClientRect().top + window.pageYOffset;
}
if (scrollPoint && !noScroll) {
_.scrollTo(scrollPoint, setting.duration)
}
})
}