WEB広告運用の困りごとが集まる場所 コミュニティ コミュニティ クリックしても色が変わらない

  • 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>

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