-
クリックしても色が変わらない
トピックス by
1792 pt
2023年8月31日 15:36
390
PV
https://sb-preview.squadbeyond.com/articles/IMQkmcJhjLUMy-hoA/preview
上記で、Q1の選択項目をクリックしても色が変化しない現象を解決したいです。
下記弊社サーバーにアップしているデータでは問題なく反応しまして、Q1を選択することで赤背景に変化します。コード自体は同じものを入れていますので、何かが干渉しているのか、検証いただきたいです！
-
1 コメント
-
ページ確認いたしました！
Q1のクリックが a タグにて下部のコンテンツと連動するよう jQueryで設定されており、色が変わる仕様が aタグ配下のチェックボックスのチェック状態により画像が変わる仕様となっているようでございます。
おそらく、ページ環境の違いで aタグのクリックが、
配下のチェックボックスのチェックまで伝達していないものと思われます。。。
解消するには 連動している 外部ファイルのjQueeryに、
下記処理を追加すれば解消できそうです。
$(function(){
$('.section').hide();
$('.secList').on('click',function(){
$('.section').not($($(this).attr('href'))).hide();
// フェードイン・アウトのアニメーション付で、表示・非表示を交互に実行
// $($(this).attr('href')).fadeToggle(800);
// show を使うと、表示するだけ （ 同じボタンを何回押しても変わらない ）
$($(this).attr('href')).show();
/*追加ここから*/
$('.secList').find('input').prop('checked',false);
$(this).find('input').prop('checked',true);
/* 追加ここまで */
$("html,body").animate({scrollTop: $('#q1_scroll').offset().top});
});
});外部ファイルで編集が難しいという事でしたら、
下記javascript をjavascript bodyに 追加していただければと思います。
<script>
const secListClick = (event) => {
const inputElement = event.currentTarget.querySelector('input');
if (inputElement && inputElement.type === 'radio') {
inputElement.checked = true;
}
}
const triggers = document.querySelectorAll('.secList');
triggers.forEach((trigger) => {
trigger.addEventListener('click', secListClick);
});
</script>ご確認のほど宜しくお願いいたします