項目選択したら該当のコンテンツ（下の表）が表示されるように変更したい。 | コミュニティ

タグ付き： widget

コミュニティ

項目選択したら該当のコンテンツ（下の表）が表示されるように変更したい。

トピックス by widget初心者 1792 pt 2023年12月18日 13:22 164 PV
【相談内容】

元々は選択内容によって下にコンテンツが出てくる仕様だったと思うのですが、私がいじったせいで常に下コンテンツが表示される状態になってしまいました。
なので選択項目に応じてコンテンツが表示されるようにする方法をお教えいただきたいです。

【Widget名】

商品検索とソートテーブル（検索条件全て含む）※要javascript

【相談ページ】

https://sb-preview.squadbeyond.com/articles/G-apZAHdvOOCaoUA/preview
widgetマスター 11 月, 1 週間前 2 人 · 1 コメント
- widget
1 コメント

widgetマスター

モデレータ

2023年12月18日 13:24

該当のWidgetを確認したところ、「初期は全表示で検索ボタンを押すと条件に合わせて表示を絞り込む」という仕様でしたのでWidget的にはこれが正しい動きです。

そのうえで「初期は全非表示で検索ボタンを押すと条件に合致する項目だけ表示」という形に変更するのであれば下記の通り修正してみてください！！！

１．オリジナルコードの35行目にある_.selectFunction(el, catArr); をコメントアウトする

該当関数の抜粋：

_.paramsSelect = function(el) {
    let url = new URL(window.location.href);
    let params = url.searchParams;
    if (params) {
        params.forEach(function(value, key) {
            if (value !== '0' && key !== 'step_uid') {
                catArr.push(value);
                if (el.querySelector('[name=' + key + ']'))
                    el.querySelector('[name=' + key + ']').dataset.check = 'true';
                let selectedKeies = el.querySelectorAll('[name=' + key + '] ');
                selectedKeies.forEach(function(selectedKey) {
                    if (selectedKey.querySelector('option')) {
                        selectedKey.querySelector('[data-cat="' + value + '"]').selected = true;
                    } else {
                        selectedKey.checked = true;
                    }
                });
            }
        });
    }
    //_.selectFunction(el, catArr);　←ここの行頭に「//」を入れてコメントアウト
}

２．HTMLの各項目<tr>のclassに is-hiddenを追加する

参考例：

<tr class="result__content js-resultContent is-hidden" data-result="p01-1, f01-2, g01-2, cat01, cat02, cat03">

※すべての項目に追加が必要です