Question

我是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>

Answer 1

尝试将链接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 亚历

Answer 2

这是你想要的吗？

更新的的现在显示最初显示链接并相应切换，也相应地切换内容（.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>

Answer 3

一个简单的解决方案是：

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

Answer 4

只要您的链接与您的跨度的顺序相同，您应该能够在没有任何特殊的“魔法”的情况下使用类名：

<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

Answer 5

我不确定我理解你。但是，例如，$（'＃linkOne .hide'）将仅选择类别为'hide'的元素，这些元素是#linkOne的子元素

jQuery - 使用相同的类名单独显示/隐藏项目

5 个答案: