过滤元素并使用 JS/jQuery 更改 URL答案

【问题标题】：Filter elements and change URL with JS/jQuery过滤元素并使用 JS/jQuery 更改 URL
【发布时间】：2021-04-14 08:45:32
【问题描述】：

我需要有关 JavaScript/jQuery 解决方案的帮助，如何为 URL 更改的产品制作过滤器。

当点击复选框然后显示选中的颜色
选中时，更多过滤器会显示所有选中的颜色
如果点击“全部显示”，则显示所有颜色（取消选中所有过滤器）
点击过滤器将改变 URL：红色=#f/红色；蓝色=#f/蓝色；红色和蓝色一起 = #f/red/blue
当页面打开时，检查 url 并应用过滤器

感谢托马斯的帮助

https://jsfiddle.net/tundyh1g/1/

    .filterelements {
      display: block;
      width: 210px;
    }

    .red,
    .green,
    .blue,
    .redgreen,
    .redblue {
      width: 50px;
      height: 50px;
      float: left;
      margin: 10px;
    }

    .red {
      background: #ff2600;
    }

    .green {
      background: #a5de00;
    }

    .blue {
      background: #0087ff;
    }

    .redgreen {
      background: rgb(255, 38, 0);
      background: linear-gradient(90deg, rgba(255, 38, 0, 1) 0%, rgba(165, 222, 0, 1) 100%);
    }

    .redblue {
      background: rgb(255, 38, 0);
      background: linear-gradient(90deg, rgba(255, 38, 0, 1) 0%, rgba(0, 135, 255, 1) 100%);
    }

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title></title>
</head>

<body>
  <button type="button" name="all">Show all</button>
  <input type="checkbox" name="red" value="red">red
  <input type="checkbox" name="blue" value="blue">green
  <input type="checkbox" name="green" value="green">blue



  <hr />
  <div class="filterelements">
    <div class="red" rel="color:red"></div>
    <div class="green" rel="color:green"></div>
    <div class="blue" rel="color:blue"></div>
    <div class="redgreen" rel="color:red|color:green"></div>
    <div class="green" rel="color:green"></div>
    <div class="red" rel="color:red"></div>
    <div class="redblue" rel="color:red|color:blue"></div>
  </div>
</body>

</html>

【问题讨论】：

标签： javascript jquery url filter

【解决方案1】：

你可以这样做：

$('.selector button').click(function() {
  $('.selector input').prop("checked",true).trigger("change");
});

$('.selector input').change(function() {
  $('.filterelements div').hide();
  $('.selector input:checked').each(function() {
      $('.filterelements div.' + $(this).val()).show();
  })
});

注意

我已经将你的 button 和 input 包装在一个带有 selector 类的 div 中，另外我已将 class="redblue" 之类的类分隔为 class="red blue"

演示

$('.selector button').click(function() {
  $('.selector input').prop("checked", true).trigger("change");
});

$('.selector input').change(function() {
  $('.filterelements div').hide();
  $('.selector input:checked').each(function() {
    $('.filterelements div.' + $(this).val()).show();
  })

  if ($('.selector input:checked').length == 0) {
    $('.filterelements div').show();
  }
});

.filterelements {
  display: block;
  width: 210px;
}

.red,
.green,
.blue,
.redgreen,
.redblue {
  width: 50px;
  height: 50px;
  float: left;
  margin: 10px;
}

.red {
  background: #ff2600;
}

.green {
  background: #a5de00;
}

.blue {
  background: #0087ff;
}

.redgreen {
  background: rgb(255, 38, 0);
  background: linear-gradient(90deg, rgba(255, 38, 0, 1) 0%, rgba(165, 222, 0, 1) 100%);
}

.redblue {
  background: rgb(255, 38, 0);
  background: linear-gradient(90deg, rgba(255, 38, 0, 1) 0%, rgba(0, 135, 255, 1) 100%);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title></title>
</head>

<body>
  <div class="selector">
    <button type="button" name="all">Show all</button>
    <input type="checkbox" name="red" value="red">red
    <input type="checkbox" name="blue" value="blue">green
    <input type="checkbox" name="green" value="green">blue
  </div>



  <hr />
  <div class="filterelements">
    <div class="red" rel="color:red"></div>
    <div class="green" rel="color:green"></div>
    <div class="blue" rel="color:blue"></div>
    <div class="red green" rel="color:red|color:green"></div>
    <div class="green" rel="color:green"></div>
    <div class="red" rel="color:red"></div>
    <div class="red blue" rel="color:red|color:blue"></div>
  </div>
</body>

</html>

【讨论】：

非常感谢您的快速回答。我有两个问题：是否可以全部显示，什么都不检查？ - 单击全部时，取消选中所有复选框并显示所有内容如何更改和从 URL 读取？
@TomášSiničák 我已经用取消选中所有选项时的解决方案更新了演示。关于 Url，这是一个单独的问题，因此您必须就此提出一个新问题。
感谢支持，我有最后一个问题：是否可以更改过滤器必须满足所有条件？例如。如果我选中绿色和红色复选框，则只会显示同时具有这两个类的元素。
@Andersen 你有什么想法吗？
@TomášSiničák 是的，但是就像您的 URL 问题一样，您将远离这个问题的内容。问题是，如果我将答案更改为与您的原始问题不匹配的内容，那么它可能会混淆其他人。

【解决方案2】：

首先，在单击按钮时，使用.prop("checked", true) 选中所有复选框，然后在更改复选框时，复选框选中长度大于 0，然后全部隐藏并仅显示已选中的复选框，否则全部显示。

$('button[name="all"]').click(function() {
  $('input[type="checkbox"]').prop("checked",true).trigger("change");
});

$('input[type="checkbox"]').on('change',function(){
  $('.filterelements div').hide();
  if( $('input[type="checkbox"]:checked').length > 0 ){
    $('input[type="checkbox"]:checked').each(function(){
        $('.'+$(this).val()).show();
    });
  }else{
    $('.filterelements div').show();
  }
})

.filterelements {
      display: block;
      width: 210px;
    }

    .red,
    .green,
    .blue,
    .redgreen,
    .redblue {
      width: 50px;
      height: 50px;
      float: left;
      margin: 10px;
    }

    .red {
      background: #ff2600;
    }

    .green {
      background: #a5de00;
    }

    .blue {
      background: #0087ff;
    }

    .redgreen {
      background: rgb(255, 38, 0);
      background: linear-gradient(90deg, rgba(255, 38, 0, 1) 0%, rgba(165, 222, 0, 1) 100%);
    }

    .redblue {
      background: rgb(255, 38, 0);
      background: linear-gradient(90deg, rgba(255, 38, 0, 1) 0%, rgba(0, 135, 255, 1) 100%);
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title></title>
</head>

<body>
  <button type="button" name="all">Show all</button>
  <input type="checkbox" name="red" value="red">red
  <input type="checkbox" name="green" value="green">green
  <input type="checkbox" name="blue" value="blue">blue



  <hr />
  <div class="filterelements">
    <div class="red" rel="color:red"></div>
    <div class="green" rel="color:green"></div>
    <div class="blue" rel="color:blue"></div>
    <div class="redgreen" rel="color:red|color:green"></div>
    <div class="green" rel="color:green"></div>
    <div class="red" rel="color:red"></div>
    <div class="redblue" rel="color:red|color:blue"></div>
  </div>
</body>

</html>

【讨论】：

感谢您的回答。我选择@CarstenLøvboAndersen 解决方案。我现在不明白为什么有人不赞成你的回答。
我先给出解决方案，你问什么。 “是否可以全部显示，什么都没有选中？ - 单击全部时，然后取消选中所有复选框”
对不起，我不知道问题出在哪里...在您的解决方案中，当我单击全部时，所有复选框都已选中。