jQuery - 單獨顯示/隱藏具有相同類名的項目

我是jQuery的極端noob。jQuery - 單獨顯示/隱藏具有相同類名的項目

我試圖根據它的相應鏈接顯示一個項目...沒有顯示其他項目。我的所有鏈接都具有相同的類名稱以及跨度。

我不知道這是否可以完成或不......我的腦子在這個問題上花了太長時間。

下面的代碼：

<html> 
<head> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<title>jQuery - Show/Hide items individually with same class name</title> 

<style type="text/css"> 
* { outline: none; } 
a { display: inline-block; margin-right: 10px; float: left; text-decoration: none;  padding: 10px; } 
span { text-align: center; display: inline; padding: 20px; background: blue; color: #fff; float: left; margin-right: 20px; width: 120px; } 
div#wrap { float: left; clear: left; margin-top: 10px; } 
div#linkOne, div#linkTwo, div#linkThree { background: #ccc; display: inline-block;  float: left; margin-right: 20px; } 
</style> 

<script type="text/javascript"> 

    $(document).ready(function(){ 

     var spans = $("span").each(function(j){ $(this).attr({class : "myDiv" + j}) }); 
     $(spans).hide(); 

     $(".show").each(function(i){ 
     $(this).attr({class : "show" + i}); 
     $(this).bind("click", function(e){ 
     $(spans).show(); 
     }); 
     }); 

     $(".hide").click(function(){ 
     $(spans).hide(); 
     }); 

    }); 

</script> 
</head> 

<body> 
    <div id="linkOne"> 
    <a class="show" href="#">Show1</a> 
    <a class="hide" href="#">Hide1</a> 
    </div> 
    <div id="linkTwo"> 
    <a class="show" href="#">Show2</a> 
    <a class="hide" href="#">Hide2</a> 
    </div> 
    <div id="linkThree"> 
    <a class="show" href="#">Show3</a> 
    <a class="hide" href="#">Hide3</a> 
    </div> 

    <div id="wrap"> 
    <span class="myDiv">div1</span> 
    <span class="myDiv">div2</span> 
    <span class="myDiv">div3</span> 
    </div> 

</body> 
</html>

來源

2009-09-26 Scott

也許變種跨越= $（「跨度」）。每個（函數（J）{$（本）.addClass（「myDiv」 + J）}） ; – 2009-09-26 11:58:41

嘗試將另一個鏈接div的id添加到要打開的範圍：

變化 DIV1 到 DIV1

然後添加jQuery的魔力：

$(function(){ 
    // First hide all hide links initially. 
    $(".hide").hide(); 

    // then attach hide handler 
    $(".hide").bind("click", function(){ 
     $(this).siblings(".show").show(); 
     $(this).hide(); 
     $(".myDiv." + $(this).attr("id")).show(); 
    }); 

    // and the show handler 
    $(".show").bind("click", function(){ 
     $(this).siblings(".hide").show(); 
     $(this).hide(); 
     $(".myDiv." + $(this).attr("id")).hide(); 
    }); 
});

HTH 亞歷

來源

2009-09-26 11:59:40

哇...謝謝亞歷克斯。這就是訣竅！ – Scott 2009-09-26 12:04:45

我不知道我理解你。但是$（'＃linkOne .hide'）例如將只選擇具有類'hide'的元素，它們是#linkOne的子元素

來源

2009-09-26 11:56:38

這是你想要的嗎？

已更新 現在顯示顯示鏈接最初和相應地切換，也相應地切換內容（.myDiv）。

<script type="text/javascript"> 
    $(document).ready(function(){ 
     $('.myDiv').hide(); 
     $('.hide').hide(); 

     $('.show').click(function() { 
     $(this).hide(); 
     $('.hide:eq(' + $('a.show').index(this) + ')').show(); 
     $('.myDiv:eq(' + $('a.show').index(this) + ')').show(); 
     }); 

     $('.hide').click(function() { 
     $(this).hide(); 
     $('.show:eq(' + $('a.hide').index(this) + ')').show(); 
     $('.myDiv:eq(' + $('a.hide').index(this) + ')').hide(); 
     }); 
    }); 
</script>

來源

2009-09-26 12:09:42

好的，但你需要處理顯示/隱藏鏈接。 – tvanfosson 2009-09-26 12:18:48

更新包括 – 2009-09-26 12:25:40

一個簡單的解決辦法是：

$(".show").each(function(i){ 
    $(this).attr({class : "show" + i}); 
    $(this).bind("click", function(e){ 
     $(".myDiv" + i).show(); 
    }); 
});

來源

2009-09-26 12:09:55

只要你的鏈接是在同一順序作爲你的跨度，你應該能夠沒有任何特殊的「魔法」與類度日名稱：

<style type="text/css"> 
...note change below... 
.link { background: #ccc; display: inline-block;  float: left; margin-right: 20px; } 
</style>

使用鏈接的順序從包裝中選擇正確的跨度。

$(document).ready(function(){ 

    $('#wrap span').hide(); 

    $(".show").click(function() { 
     var index = $('.show').index(this); 
     $('#wrap span').eq(index).show(); 
     $(this).hide(); 
     $(this).siblings('.hide').show(); 
    }); 

    $(".hide").click(function(){ 
     var index = $('.hide').index(this); 
     $('#wrap span').eq(index).hide(); 
     $(this).hide(); 
     $(this).siblings('.show').show(); 
    }); 

});

注意更改鏈接類而不是命名div。

<div class="link"> 
    <a class="show" href="#">Show1</a> 
    <a class="hide" href="#">Hide1</a> 
</div> 
<div class="link"> 
    <a class="show" href="#">Show2</a> 
    <a class="hide" href="#">Hide2</a> 
</div> 
<div class="link"> 
    <a class="show" href="#">Show3</a> 
    <a class="hide" href="#">Hide3</a> 
</div>

DIV1 DIV2 DIV3

來源

2009-09-26 12:17:46 tvanfosson

jQuery - 單獨顯示/隱藏具有相同類名的項目

回答

相關問題