简单的jQuery和HTML来显示/隐藏div页

-1

我想出了一些非常基本的jQuery使用一系列if语句来通过html选择列表在页面上显示/隐藏一些div。如果可能，我想以几种方式优化此代码：简单的jQuery和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/

谢谢，马特

来源

2016-01-05 matts213

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>

来源

2016-01-05 22:09:06

给你：

$('#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。因此，如果没有其他的话，也没有必要。

JSFiddle here。

来源

2016-01-05 22:51:47

改变所有的块都有一个共同的类，然后你可以使用选择的值，以缩短代码：

$('#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/

来源

2016-01-05 23:17:03

简单的jQuery和HTML来显示/隐藏div页

回答

相关问题