クリックしても色が変わらない | コミュニティ

コミュニティ

クリックしても色が変わらない

トピックス by widget初心者 1792 pt 2023年8月31日 15:36 278 PV
https://sb-preview.squadbeyond.com/articles/IMQkmcJhjLUMy-hoA/preview

上記で、Q1の選択項目をクリックしても色が変化しない現象を解決したいです。

下記弊社サーバーにアップしているデータでは問題なく反応しまして、Q1を選択することで赤背景に変化します。コード自体は同じものを入れていますので、何かが干渉しているのか、検証いただきたいです！
widgetマスター 11 月前 2 人 · 1 コメント
1 コメント

widgetマスター

モデレータ

2023年8月31日 15:38

ページ確認いたしました！

Q1のクリックが a タグにて下部のコンテンツと連動するよう jQueryで設定されており、色が変わる仕様が aタグ配下のチェックボックスのチェック状態により画像が変わる仕様となっているようでございます。

外部ファイル : https://production.static.squadbeyond.com/uploads/article_asset_files/file/4668/454a5fc1-8335-49f1-9aeb-865e5f046bf1.js

おそらく、ページ環境の違いで 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>

ご確認のほど宜しくお願いいたします