Question

我需要显示具有从下拉列表中选择的属性的元素并隐藏所有其他

   <select id="date-selector">
      <option value="7">7</option>
      <option value="8">8</option>
      <option value="9">9</option>
    </select>



  <div class="test" data-number="7">Seven</div>
    <div class="test" data-number="7">Another Seven</div>
    <div class="test" data-number="7">Another Seven</div>
    <div class="test" data-number="7">Another Seven</div>
    <div class="test" data-number="8">Eight</div>
    <div class="test" data-number="8">Another Eight</div>
    <div class="test" data-number="9">Nine</div>
    <div class="test" data-number="9">Another Nine</div>
    <div class="test" data-number="9">Another Nine</div>

现在，如果我选择7，则必须隐藏除7以外的所有元素。

如何使用jquery hide（）执行此操作？

注意：我有多个具有相同数据属性的元素，我无法用类＆＃34; test＆＃34;隐藏所有元素。我必须隐藏属性不是7的元素。

Answer 1

$('.test').hide();
$('[data-number=' + $('select').val() + ']').show();

$('select').on('change', function() {

  var value = $(this).val();
  $('.test').hide();
  $('[data-number=' + value + ']').show();

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="date-selector">
  <option value="7">7</option>
  <option value="8">8</option>
  <option value="9">9</option>
</select>

<div class="test" data-number="7">Seven</div>
<div class="test" data-number="7">Another Seven</div>
<div class="test" data-number="7">Another Seven</div>
<div class="test" data-number="7">Another Seven</div>
<div class="test" data-number="8">Eight</div>
<div class="test" data-number="8">Another Eight</div>
<div class="test" data-number="9">Nine</div>
<div class="test" data-number="9">Another Nine</div>
<div class="test" data-number="9">Another Nine</div>

Answer 2

请试试这个：

$( "#date-selector" ).change(function() {
    var value = $(this).val();    
    $('.test[data-number!="'+value+'"]').hide();
    $('.test[data-number="'+value+'"]').show();

}）;

请参阅jsfidde

中的解决方案

jquery隐藏下拉列表中的元素

2 个答案: