jquery隱藏所有和顯示子女

我有鏈接，當你點擊它顯示具體的div和其餘隱藏。這一切工作正常，但它是全部手動編碼的。請參閱http://jsfiddle.net/M9kAX/jquery隱藏所有和顯示子女

是否有更好的方法使用適用於所有divs的簡單腳本對其進行編碼？

感謝，

<div class="kosa"> 
<div id="video0"><h5>Introduction</h5> 
Intro 
</div>   
<div id="video1"><h5>Install </h5> 
Install 
</div> 
<div id="video2"><h5>Authorize with Adobe ID</h5> 
Authorize 
</div> 
<div id="video3"><h5>Add a Library</h5> 
Add Lib 
</div> 
<div id="video4"><h5>Borrow titles</h5> 
Borrow 
</div> 
<div id="video5"><h5>Download</h5> 
Download 
</div> 
<div id="video6"><h5>Read eBooks</h5> 
Read 
</div> 
<div id="video7"><h5>Delete, Return, & Share</h5> 
Del 
</div> 
<div id="video8"><h5>One</h5> 
One 
</div> 
</div> 
     <div class="related">  
      <h5>Related Videos</h5> 
      <span id="link0"><i class="icon-video"></i> Introduction</span> 
      <span id="link1"><i class="icon-video"></i> Install</span> 
      <span id="link2"><i class="icon-video"></i> Authorize with Adobe ID</span> 
      <span id="link3"><i class="icon-video"></i> Add a Library</span> 
      <span id="link4"><i class="icon-video"></i> Borrow titles</span> 
      <span id="link5"><i class="icon-video"></i> Download</span> 
      <span id="link6"><i class="icon-video"></i> Read eBooks</span> 
      <span id="link7"><i class="icon-video"></i> Delete, Return, & Share</span> 
      <span id="link8"><i class="icon-video"></i> One</span> 
     </div> 

$(function() {  
     $('#video1,#video2,#video3,#video4,#video5,#video6,#video7,#video8').hide(); 
     $('#link0').click(function() {$('#video0').show();$('#video1,#video2,#video3,#video4,#video5,#video6,#video7,#video8').hide(); }); 
     $('#link1').click(function() {$('#video1').show();$('#video0,#video2,#video3,#video4,#video5,#video6,#video7,#video8').hide(); }); 
     $('#link2').click(function() {$('#video2').show();$('#video0,#video1,#video3,#video4,#video5,#video6,#video7,#video8').hide(); }); 
     $('#link3').click(function() {$('#video3').show();$('#video0,#video1,#video2,#video4,#video5,#video6,#video7,#video8').hide(); }); 
     $('#link4').click(function() {$('#video4').show();$('#video0,#video1,#video2,#video3,#video5,#video6,#video7,#video8').hide(); }); 
     $('#link5').click(function() {$('#video5').show();$('#video0,#video1,#video2,#video3,#video4,#video6,#video7,#video8').hide(); }); 
     $('#link6').click(function() {$('#video6').show();$('#video0,#video1,#video2,#video3,#video4,#video5,#video7,#video8').hide(); }); 
     $('#link7').click(function() {$('#video7').show();$('#video0,#video1,#video2,#video3,#video4,#video5,#video6,#video8').hide(); }); 
     $('#link8').click(function() {$('#video8').show();$('#video0,#video1,#video2,#video3,#video4,#video5,#video6,#video7').hide(); }); 
     });

來源

2014-01-29 SamotnyPocitac

使用類而不是ID –

我問過類似的問題，今天早些時候，檢查出我得到的答案是偉大的...... HTTP：//stackoverflow.com/questions/21427353/condense-重複jQuery的功能 – Dijon

JSFIDDLE DEMO

來源

2014-01-29 14:56:05 Krishna

謝謝，這對我工作最好！ – SamotnyPocitac

打算自己發表一個答案，但這非常接近，我只是解釋爲什麼我的會不同。使用'this.id.replace（「link」，「video」）'這樣，如果頁面有超過10個視頻，就可以使用;} – Archer

@Archer - 這是一個很好的觀點。讓我編輯它.. – Krishna

我會用data屬性：

<span id="link0" data-video="video0"><i class="icon-video"></i> Introduction</span>

視頻ID添加到每個跨度無線日data-video，那麼你可以使用jQuery的data功能檢索值並顯示你想要的DIV：

$(function() {  
    $('.kosa div').hide(); 
    // $('.kosa div:first').show(); // uncomment this line to show the frst div by default 
    $('.related span').click(function() { 
     $('.kosa div').hide(); 
     $('#'+$(this).data('video')).show(); 
    }); 
});

這種方法比使用.eq功能，這將迫使你走動的div的，使更靈活確保每次編輯時它們的順序都是正確的。這也可以讓你鏈接到多個跨度相同的分區，如果你需要。

http://jsfiddle.net/M9kAX/3/

來源

2014-01-29 14:56:15 Samsquanch

使用CSS classNames（fiddle）：

$(function() { 
    var $videos = $('.video'); 

    var showVideo = function (index) { 
     $videos.hide().eq(index).show(); 
    }; 

    showVideo(0); 

    $('.link').click(function() { 
     var linkIndex = $(this).index() - 1; 
     showVideo(linkIndex) 
    }); 

});

來源

2014-01-29 14:57:12 Pinal

try something like this

$(function() {  
    $("span").click(function(){ 
     $("div.kosa").find("div#video").html($(this).text()); 
    }); 
});

來源

2014-01-29 15:01:56

jQuery (".kosa") .find ("div:first-child") 
        .css ("display", "block"); 

jQuery (".related") .find ("span") 
.click (function() { 
     $idNo = jQuery (this).attr ('id').substring(4); 
    jQuery (".kosa") .find ("div") 
         .css ("display", "none"); 

    jQuery (".kosa") .find ("#video" + $idNo) 
         .css ("display", "block"); 
});

的CSS變化：

.kosa div{ 
    padding:40px; 
    background:#ccc; 
    display: none; // Included 
}

的jsfiddle：http://jsfiddle.net/M9kAX/11/

來源

2014-01-29 15:03:55

jquery隱藏所有和顯示子女

回答

相關問題