简化 jQuery 和 HTML 以在页面上显示/隐藏 div

Question

我想出了一些非常基本的 jQuery，它使用一系列 if 语句通过 html 选择列表在页面上显示/隐藏一些 Div。如果可能的话，我想以几种方式优化这段代码：

1) 如何使用更少的代码来达到相同的效果？

2) 这可能有点宽泛，但我怎样才能优化这段代码，以便不必手动输入新的 Div？换句话说，让我不必专门添加$(block-x).hide() $(block-x).show() etc...

HTML：

<div class="container">
  <form class="form">
    <div class="form-group">
      <label for="selectList">Filter Divs</label>
      <select id="selectList" class="form-control">
        <option value="1" id="lAll" selected="selected">Show All</option>
        <option value="2" id="lOne">One</option>
        <option value="3" id="lTwo">Two</option>
        <option value="4" id="lThree">Three</option>
        <option value="5" id="lFour">Four</option>
      </select>
    </div>
  </form>

  <div class="filterDiv">
    <div id="block-1">
      <h1> Div One</h1>
    </div>
    <div id="block-2">
      <h1> Div Two</h1>
    </div>
    <div id="block-3">
      <h1> Div Three</h1>
    </div>
    <div id="block-4">
      <h1>Div Four</h1>
    </div>
  </div>
</div>

JAVASCRIPT：

$('#selectList').change(function() {
  $('#block-1').hide();
  $('#block-2').hide();
  $('#block-3').hide();
  $('#block-4').hide();

  if ($('#lAll').is(':selected')) {
    $('#block-1').fadeIn();
    $('#block-2').fadeIn();
    $('#block-3').fadeIn();
    $('#block-4').fadeIn();

  }
  if ($('#lOne').is(':selected')) {
    $('#block-1').fadeIn();

  }
  if ($('#lTwo').is(':selected')) {
    $('#block-2').fadeIn();

  }
  if ($('#lThree').is(':selected')) {
    $('#block-3').fadeIn();

  }
  if ($('#lFour').is(':selected')) {
    $('#block-4').fadeIn();

  }

});

小提琴： https://jsfiddle.net/matts213/29ksshrr/5/

谢谢， 马特

Answer 1

把所有的block改成一个共同的类，然后就可以用select的值来缩短代码了：

$('#selectList').change(function() {
    var selected = parseInt($('#selectList').val());
    var all = (selected === 1) ? $('.container').children().fadeIn() : false;
    var showItem = (selected > 1) ? $('.container').children(':nth-child(' + (selected - 1) + ')').fadeIn().siblings().hide() : false;
});

https://jsfiddle.net/mark_c/q5e7x2nc/

Answer 2

Jquery 的选择器与 CSS 一起使用，因此无需单独使用每个 fadeIn，只需将它们全部放在一个 css 选择器中，这会稍微减少您的代码。

$(function(){


  $('#selectList').change(function() {
  $('#block-1,#block-2,#block-3,#block-4').hide();

  if ($('#lAll').is(':selected')) {
    $('#block-1,#block-2,#block-3,#block-4').fadeIn();    
  }
  if ($('#lOne').is(':selected')) {
    $('#block-1').fadeIn();

  }
  if ($('#lTwo').is(':selected')) {
    $('#block-2').fadeIn();

  }
  if ($('#lThree').is(':selected')) {
    $('#block-3').fadeIn();

  }
  if ($('#lFour').is(':selected')) {
    $('#block-4').fadeIn();

  }

});


});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <form class="form">
    <div class="form-group">
      <label for="selectList">Filter Divs</label>
      <select id="selectList" class="form-control">
        <option value="1" id="lAll" selected="selected">Show All</option>
        <option value="2" id="lOne">One</option>
        <option value="3" id="lTwo">Two</option>
        <option value="4" id="lThree">Three</option>
        <option value="5" id="lFour">Four</option>
      </select>
    </div>
  </form>

  <div class="filterDiv">
    <div id="block-1">
      <h1> Div One</h1>
    </div>
    <div id="block-2">
      <h1> Div Two</h1>
    </div>
    <div id="block-3">
      <h1> Div Three</h1>
    </div>
    <div id="block-4">
      <h1>Div Four</h1>
    </div>
  </div>
</div>

Answer 3

你在这里：

$('#selectList').change(function() {

  var divId = +$(this).find(":selected").val();
  var divs = $('.filterDiv').children('div');

  ( divId === 0 ) ? divs.fadeIn() : $('.filterDiv div:nth-child(' + divId + ')').fadeIn().siblings().hide();

});

和 HTML（改进）

<div class="container">
  <form class="form">
    <div class="form-group">
      <label for="selectList">Filter Divs</label>
      <select id="selectList" class="form-control">
        <option value="0" selected="selected">Show All</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
        <option value="4">Four</option>
      </select>
    </div>
  </form>
</div>

<div class="filterDiv container">
  <div>
    <h1> Div One</h1>
  </div>
  <div>
    <h1> Div Two</h1>
  </div>
  <div>
    <h1> Div Three</h1>
  </div>
  <div>    
    <h1>Div Four</h1>
  </div>    
</div>

如您所见，不需要一堆 id。因此，没有必要也有一堆 if else。

JSFiddle here.