-
アンケート-チャット型※要javascriptについて
トピックス by
160 pt
2023年9月25日 18:44
244
PV
-
相談したいWidgetの情報
-
相談内容
・チャットが作動しません。どう変更すれば作動しますか？
・最下部のCTAの表示を真ん中にしたいです。どう変更すればできますか？
よろしくお願いします。
-
-
12 コメント
-
ご相談ありがとうございます！
確認させていただきますね！
-
お待たせしました！
先にチャットを作動させる方法を共有させていただきます！
CSSを変更
[ 変更前 ] .l-chat__list__item:not(:first-of-type).is-show { display: none; } [ 変更後 ] .l-chat__list__item:not(:first-of-type).is-show { display: block; }プレビュー
ご確認お願いします！
-
続けてCTAボタンを真ん中にする方法を案内いたします！
CSSを変更
[ 変更前 ]
.l-chat__qa { display: flex; flex-wrap: wrap; align-items: flex-start; }[ 変更後 ]
.l-chat__qa { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center; /* ← 追加 */ }プレビュー
-
こちらどちらも解決いたしました！
ご回答いただきありがとうございました。
-
早速お試しいただきありがとうございます！
よかったです☺
-
-
もう1点ご相談させてください！
現在一回選択肢したら、再度クリックしても選択解除できない仕様ですが、
選択解除できるようにすることは可能でしょうか？
元のwidget自体が解除できないようで…。
ご確認いただけますと幸いです。
-
ご相談ありがとうございます💫
確認させていただきますね！！！
-
-
-
参考ページの共有もありがとうございます💪
-
-
お待たせしました！！！
下記 の 3箇所 javascript の修正をお願いいたします。
① btnRadio にコードを追加
let btnRadioes = el.querySelectorAll(".btn-single .l-chat__qa__a__item");
btnRadioes.forEach(function(btnRadio) {
btnRadio.addEventListener("click", function(e) {
showAnimation(e.target);
/* 追加ここから */
btnRadioes.forEach(function(btnRadio) {
btnRadio.classList.remove(selectedClass);
});
/* 追加ここまで */
e.target.classList.add(selectedClass);
const nextElm = e.target.closest(".l-chat__list__item").nextElementSibling;
nextElm.classList.add(showClass);
});
});② btnMultiple の修正
let btnMultiples = el.querySelectorAll(".btn-multiple .l-chat__qa__a__item");
btnMultiples.forEach(function(btnMultiple) {
btnMultiple.addEventListener("click", function(e) {
showAnimation(e.target);
e.target.classList.toggle(selectedClass); /* ← add を toggle に修正 */
});
});③ btnOption にコードを追加
let btnOptions = el.querySelectorAll(".btn-option .l-chat__qa__a__item");
btnOptions.forEach(function(btnOption) {
btnOption.addEventListener("click", function(e) {
showAnimation(e.target);
/* 追加ここから */
btnOptions.forEach(function(btnOption) {
btnOption.classList.remove(selectedClass);
});
/* 追加ここまで */
e.target.classList.add(selectedClass);
const hiddenElm = e.target.closest(".l-chat__qa").querySelector(".l-chat__hidden");
hiddenElm.classList.add(showClass);
});
});プレビュー
-
早速ありがとうございます！
できました！
-
よかったです👏
-
