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 - 单独显示/隐藏具有相同类名的项目

回答

相关问题