0

チェックボックスにチェックを入れたら、リアルタイムでクラスが付与されてdisplay:noneになったりdiplay:blockになったりするものは多いのですが、いちいち画面がチラつくのでチェックをつけ終えて「検索」を押すとクラスが付与されてほしいです。

下記を参考にしましたが、
https://www.mitsue.co.jp/knowledge/blog/frontend/201709/13_1426.html

「チェックボックスが操作されたタイミングで要素の属性を変更する」処理になっているそうです。

これをボタン<button>を押したときに要素の属性を変更したいです。

var widget = document.getElementById('js-filter');
var checkboxes = widget.querySelectorAll('.filter-cond input[type="checkbox"]');
var checkedList = [];
var filter = function () {
    checkedList = [];

    Array.prototype.forEach.call(checkboxes, function (input) {
        if (input.checked) {
            checkedList.push(input.value);
        }
    });

    widget.setAttribute('data-filter-view', checkedList.join(' '));
};

Array.prototype.forEach.call(checkboxes, function (checkbox) {
    checkbox.addEventListener('change', filter);
});
<style>
[data-filter-view]:not([data-filter-view=""]) [data-filter-key] {
    display: none;
}
[data-filter-view][data-filter-view~="貝類"] [data-filter-key="貝類"],
[data-filter-view][data-filter-view~="光物"] [data-filter-key="光物"],
[data-filter-view][data-filter-view~="白身"] [data-filter-key="白身"],
[data-filter-view][data-filter-view~="赤身"] [data-filter-key="赤身"] {
    display: block;
}
</style>

<div class="filter" id="js-filter">
<ul class="filter-cond">
<li><label><input type="checkbox" value="貝類">貝類</label></li>
<li><label><input type="checkbox" value="光物">光物</label></li>
<li><label><input type="checkbox" value="白身">白身</label></li>
<li><label><input type="checkbox" value="赤身">赤身</label></li>
<!-- /.filter-cond --></ul>

<ul class="filter-items">
<li data-filter-key="貝類">つぶ貝</li>
<li data-filter-key="白身">カンパチ</li>
<li data-filter-key="赤身">マグロ</li>
<li data-filter-key="光物">コハダ</li>
<li data-filter-key="貝類">バイ貝</li>
<li data-filter-key="白身">マダイ</li>
<li data-filter-key="貝類">サザエ</li>
<!-- /.filter-items --></ul>
<!-- /#js-filter--></div>

<button>を押すと上記が走るようにしてみたのですが、それだと<button>を押したことがあるとチェックボックスでリアルタイムで絞り込みができる、になってしまいました…。

よろしくお願いいたします。

1 件の回答 1

0

「チェックボックスが操作されたタイミングで要素の属性を変更する」処理になっているそうです。

これをボタンを押したときに要素の属性を変更したいです。

button 要素をクリックしたときに filter 関数が実行されるようにすれば良いので、イベントを割り当てる要素を button 要素に、イベントの種類を click に、イベントリスナは filter 関数のまま、というように変更することで、質問者さんの期待する動作が実現出来ます。

var widget = document.getElementById('js-filter');
var checkboxes = widget.querySelectorAll('.filter-cond input[type="checkbox"]');
var filterBtn = document.getElementById('filterBtn');
var checkedList = [];
var filter = function() {
  checkedList = [];

  Array.prototype.forEach.call(checkboxes, function(input) {
    if (input.checked) {
      checkedList.push(input.value);
    }
  });

  widget.setAttribute('data-filter-view', checkedList.join(' '));
};

filterBtn.addEventListener('click', filter);

var widget = document.getElementById('js-filter');
var checkboxes = widget.querySelectorAll('.filter-cond input[type="checkbox"]');
var filterBtn = document.getElementById('filterBtn');
var checkedList = [];
var filter = function() {
  checkedList = [];

  Array.prototype.forEach.call(checkboxes, function(input) {
    if (input.checked) {
      checkedList.push(input.value);
    }
  });

  widget.setAttribute('data-filter-view', checkedList.join(' '));
};

filterBtn.addEventListener('click', filter);
[data-filter-view]:not([data-filter-view=""]) [data-filter-key] {
  display: none;
}

[data-filter-view][data-filter-view~="貝類"] [data-filter-key="貝類"],
[data-filter-view][data-filter-view~="光物"] [data-filter-key="光物"],
[data-filter-view][data-filter-view~="白身"] [data-filter-key="白身"],
[data-filter-view][data-filter-view~="赤身"] [data-filter-key="赤身"] {
  display: block;
}
<div class="filter" id="js-filter">
  <ul class="filter-cond">
    <li><label><input type="checkbox" value="貝類">貝類</label></li>
    <li><label><input type="checkbox" value="光物">光物</label></li>
    <li><label><input type="checkbox" value="白身">白身</label></li>
    <li><label><input type="checkbox" value="赤身">赤身</label></li>
    <!-- /.filter-cond -->
  </ul>
  <button id="filterBtn">検索</button>

  <ul class="filter-items">
    <li data-filter-key="貝類">つぶ貝</li>
    <li data-filter-key="白身">カンパチ</li>
    <li data-filter-key="赤身">マグロ</li>
    <li data-filter-key="光物">コハダ</li>
    <li data-filter-key="貝類">バイ貝</li>
    <li data-filter-key="白身">マダイ</li>
    <li data-filter-key="貝類">サザエ</li>
    <!-- /.filter-items -->
  </ul>
  <!-- /#js-filter-->
</div>

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。