Home>

Please note that this is the first post, so there are many points that cannot be used.

From the state where the products are listed,
I want to display the corresponding product when I press the [Red] [Yellow] [Green] button.
Each item may have multiple colors.

Corresponding source code
<style>
  .buttonWrap button {
    display: inline-block;
    padding: 3px;
    cursor: pointer;
  }
  .buttonWrap button.is-active {
    color: white;
    background-color: black;
  }
  .is-hide {
    display: none;
  }
</style>

<button data-group = "red">red</button>
<button data-group = "yellow">yellow</button>
<button data-group = "green">green</button>

<ul>
<li data-group ='{"red", "green"}'>Product 1</li>
<li data-group = "red">Product 2</li>
<li data-group = "yellow">Product 3</li>
<li data-group ='{"red", "green"}'>Product 4</li>
<li data-group = "green">Product 5</li>
</ul>
<script>
  var searchItem = ".buttonWrap button";
  var listItem = ".line";
  var hideClass = "is-hide";
  var activeClass = "is-active";
  var groupAry = $(".line"). Attr ("data-group");// Get an array of data-group
  $(function () {
    // When you change the refinement
    $(searchItem) .on ("click", function () {
      $(searchItem) .removeClass (activeClass);
      var group = $(this) .addClass (activeClass) .data ("group");
      search_filter (group);
    });
  });
  function search_filter (group) {
    // Unhide
    $(listItem) .removeClass (hideClass);
    // Show all if the value is empty
    if (group === "") {
      return;
    }
    // Check each item in the list
    for (var i = 0;i<$(listItem) .length;i ++) {
      // Get the item set for the item
      var itemData = $(listItem) .eq (i) .data ("group");
      // Check if it is the target of narrowing down
      if (itemData! == group) {
        $(listItem) .eq (i) .addClass (hideClass);
      }
    }
  }
</script>
What I tried

If i look at the site of Reference 1 and have a single color, you could implement it.
However, it could not be implemented well when multiple data were retained.
Therefore, I described it in a form that allows me to hold multiple data by looking at Reference 2.

var groupAry = $(".line"). Attr ("data-group");// Get an array of data-group


I tried to get it like this and put it in place of itemData, but it didn't work.

I think the cause is that the data-group has not been acquired properly, but it would be helpful if you could give me a solution or hint.
Thank you.

Supplementary information

HTML CSS jQuery 3.4.1 is described.

Referenced site

Reference 1: Narrow down the search by the selected item

Reference 2: Store as an array of HTML data attributes
https://qiita.com/[email protected]/items/e70b979af9b60876b785

  • Answer # 1

    You can get it.

        var itemData = $(listItem) .eq (i) .data ("group");
          console.log (itemData)
    {"red", "green"}
    red
    yellow
    {"red", "green"}
    green

    Since itemData is partly in object format, it will always be false when compared to group, which is just a string.

    If it is an object, you need to check "Do you include it in it?".
    However, if there are "multiple" possibilities "", it is better to define them all in array format.

    <p>Product 1</p>
    <p>Product 2</p>
    <p>Product 3</p>
    <p>Product 4</p>
    <p>Product 5</p>

    And then, for example,

        // Check if it is the target of narrowing down
          if (itemData.indexOf (group) === -1) {
            $(listItem) .eq (i) .addClass (hideClass);
          }

    But if it's not key: value{}Than[]I personally think that is preferable.

  • Answer # 2

    jQuery data has the feature that it can be retrieved as an array by writing the value like an array.

    <script>
    $(function () {
      var groups = $('.line'). map (function () {
        return [$(this) .data ('group')];
      }) .get ();
      console.log (groups);
    });
    </script>
    <p>Product 1</p>
    <p>Product 2</p>
    <p>Product 3</p>
    <p>Product 4</p>
    <p>Product 5</p>
    


    Taking advantage of the above properties

    <script>
    $(function () {
      $('button [data-group]'). on ('click', function () {
        var group = $(this) .data ('group');
        $('.line'). hide (). filter (function () {
          return $.inArray (group, $(this) .data ('group'))>-1;
        }) .show ();
      });
    });
    </script>
    <button data-group = "red">red</button>
    <button data-group = "yellow">yellow</button>
    <button data-group = "green">green</button>
    <p>Product 1 (rg)</p>
    <p>Product 2 (r)</p>
    <p>Product 3 (y)</p>
    <p>Product 4 (rg)</p>
    <p>Product 5 (g)</p>