-1

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

   <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() 做到这一点？

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

4

2 回答 2

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>

于 2014-12-22T04:10:30.227 回答
0

请试试这个：

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

});

请参阅jsfidde中的解决方案

于 2014-12-22T04:20:20.360 回答