簡單的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頁

回答

相關問題