-
選択した回答に応じたコンテンツが出てくる動作を修正したい
トピックス by
1792 pt
2023年9月11日 17:56
311
PV
【Widget名】
アンケート 選択状態に対応したコンテンツを表示（スクロール・最後の質問に回答すると下部表示）※要javascript(アンケート)
【修正したいこと】
現在、選択した回答に応じたコンテンツが出てくる動作について、以下の問題があります。
- 選択を外すためにチェックボックスを押しても、下のコンテンツが出てくる
- 複数の回答を選択しても、ひとつの回答に応じたコンテンツしか表示されない
これを、以下のように修正したいです！
- 選択を外すとコンテンツが隠れる
- 選択したすべての回答に応じた下のコンテンツを同時に複数表示させる
【参考ページ】
https://informasihaji.com/ab/wArgABWGTnIsHwbCBg
【参考画像】
https://drive.google.com/file/d/11TQrczT6YFLOYAWvrfvQY90NYlsJgudg/view
-
1 コメント
-
下記 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)
}
})
}