Question

当我单击按钮的两个不同部分时，我想合并两个过滤器。现在，当我单击一个按钮时，它将删除上一个按钮的选择。我已经尝试了几种功能，但无法提供正确的逻辑。

我已经写出了我当前状态的模式。

HTML

<!-- Buttons -->

<p> Language: <button class="btn" data-category="en"> EN </button> <button class="btn" data-category="it"> IT </button> </p>
<p> Stuff: <button class="btn" data-category="a"> A </button> <button class="btn" data-category="b"> B </button> <button class="btn" data-category="c"> C </button> </p>

<!-- Elements to select -->

  <div class="element en a">
    <p>en A</p>
  </div>

  <div class="element en b">
    <p>en B</p>
  </div>

  <div class="element it c">
    <p>it C</p>
  </div>

  <div class="element it b">
    <p>it b</p>
  </div>

js / jQuery

$(".btn").click(function(e){
  e.preventDefault();
  var category = $(this).data("category")
  $('.element').hide();
  $('.element.'+category).fadeIn();
})

它也在this fiddle中。

也很高兴拥有

我想知道在选择按钮后如何为其着色。
添加一个重置按钮（我想在数据类别中添加“重置”会很容易。

感谢您的建议和建议！

Answer 1

一种方法是使用radio按钮。他们允许每组一个选择。

一个缺点是，除非在同一组中选择另一个单选按钮，否则您不能取消选中该单选按钮，因此我为每个组都添加了一个“重置”按钮。

根据选择，我正在基于选中的按钮构建一个选择器字符串类。

$(".mycb input").on('change', function(e) {

  // select all the checked buttons.
  var $checked = $('.mycb :checked');
  
  // build an array of all the checked values.
  var checked_classes = $checked.map(function() {
      return this.value;
    }).toArray();
  
  // add the baseline "element" class to the array.
  checked_classes.unshift('.element');
  
  // build the class selector string.
  var classes=checked_classes.join('.');
  
  // debug the class selector string.
  // console.log(classes);
  
  // hide all elements.
  $('.element').hide();
  
  // show the elements that match the class selector string.
  $(classes).fadeIn();
  
});

$('.reset').on('click', function() {
  var $container = $(this).closest('p');
  $('input', $container).prop('checked', false).last().trigger('change');
});

btn-selected {
  color: red;
}

.mycb input {
  display: none;
}

.mycb span {
  background-color: white;
  border: 1px solid #CCC;
  border-radius: .3em;
  padding: 0 .3em;
  cursor:pointer;
  user-select: none;
}

.mycb input:checked+span {
  background-color: lightblue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Button -->

<p>Language:
  <label class="mycb">
    <input type="radio" name="lang" value="en">
    <span>EN</span>
  </label>
  <label class="mycb">
    <input type="radio" name="lang" value="it">
    <span>IT</span>
  </label>
  <span class="mycb reset"><span>Reset</span></span>
</p>

<p>Stuff:
  <label class="mycb">
    <input type="radio" name="stuff" value="a">
    <span>A</span>
  </label>
  <label class="mycb">
    <input type="radio" name="stuff" value="b">
    <span>B</span>
  </label>
  <label class="mycb">
    <input type="radio" name="stuff" value="c">
    <span>C</span>
  </label>
  <span class="mycb reset"><span>Reset</span></span>
</p>

<!-- Elements to select -->

<div class="element en a">
  <p>en A</p>
</div>

<div class="element en b">
  <p>en B</p>
</div>

<div class="element it c">
  <p>it C</p>
</div>

<div class="element it b">
  <p>it b</p>
</div>

Answer 2

我已经分叉了您的js小提琴，以使用您的CSS类提供解决方案

https://jsfiddle.net/sguex20k/

JavaScript

$('.btn').removeClass('btn-selected'); // resetting all buttons to remove class

/* other code */

$(this).addClass('btn-selected'); // adding class to clicked button

CSS中的问题是您在选择器中缺少.

.btn-selected { }

单击按钮的两个不同部分时组合两个过滤器

2 个答案: