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

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

jquery

jQuery-使用相同的类名单独显示/隐藏项,jquery,Jquery,我是jQuery的极端noob 我试图显示一个项目的基础上，它的相应链接…而不显示其他项目。我的所有链接都具有相同的类名和跨距我不知道这是否能做到…我在这件事上绞尽脑汁太久了代码如下： <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <title>jQuery - Show/H

我是jQuery的极端noob

我试图显示一个项目的基础上，它的相应链接…而不显示其他项目。我的所有链接都具有相同的类名和跨距

我不知道这是否能做到…我在这件事上绞尽脑汁太久了

代码如下：

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


jQuery-使用相同的类名单独显示/隐藏项
*{大纲：无；}
{显示：内联块；右边距：10px；浮动：左；文本装饰：无；填充：10px；}
span{文本对齐：居中；显示：内联；填充：20px；背景：蓝色；颜色：#fff；浮动：左；右边距：20px；宽度：120px；}
div#wrap{float:left；clear:left；边距顶端：10px；}
div#linkOne，div#linkTwo，div#linkThree{背景：#ccc；显示：内联块；浮点：左；边距右：20px；}
$（文档）.ready（函数（）{
var span=$（“span”）.each（函数（j）{$（this.attr（{class:“myDiv”+j}））；
$（span.hide（）；
$（“.show”）。每个（功能（i）{
$（this.attr（{class:“show”+i}）；
$（此）.bind（“单击”，函数（e）{
$（span.show（）；
});
});
$（“.hide”）。单击（函数（）{
$（span.hide（）；
});
});
第一组
第二组
第三组

我不太明白你的意思。但是，例如$（“#linkOne.hide”）将只选择类为“hide”的元素，这些元素是#linkOne的子元素。我不确定我是否理解您的意思。但是，例如$（“#linkOne.hide”）将仅选择类为“hide”的元素，这些元素是#linkOne的子元素。请尝试将links div的另一个id添加到要打开的范围中：

改变第一组到第一组

然后添加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();
    });
});

嗯

Alex

尝试将链接div的另一个id添加到要打开的范围：

改变第一组到第一组

然后添加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();
    });
});

嗯亚历克斯这就是你想要的吗

更新现在显示初始显示链接并进行相应切换，同时也相应切换内容（.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>


$（文档）.ready（函数（）{
$（'.myDiv'）.hide（）；
$（'.hide'）.hide（）；
$（'.show'）。单击（函数（）{
$（this.hide（）；
$（'.hide:eq（'+$（'a.show'）.index（this）+'）.show（）；
$（'.myDiv:eq（'+$（'a.show'）.index（this）+'））.show（）；
});
$（'.hide'）。单击（函数（）{
$（this.hide（）；
$（'.show:eq（'+$（'a.hide'）.index（this）+'））.show（）；
$（'.myDiv:eq（'+$（'a.hide'）.index（this）+'））.hide（）；
});
});

这就是你想要的吗

更新现在显示初始显示链接并进行相应切换，同时也相应切换内容（.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>


$（文档）.ready（函数（）{
$（'.myDiv'）.hide（）；
$（'.hide'）.hide（）；
$（'.show'）。单击（函数（）{
$（this.hide（）；
$（'.hide:eq（'+$（'a.show'）.index（this）+'）.show（）；
$（'.myDiv:eq（'+$（'a.show'）.index（this）+'））.show（）；
});
$（'.hide'）。单击（函数（）{
$（this.hide（）；
$（'.show:eq（'+$（'a.hide'）.index（this）+'））.show（）；
$（'.myDiv:eq（'+$（'a.hide'）.index（this）+'））.hide（）；
});
});

一个简单的解决方案是：

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

一个简单的解决办法是：

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

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

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

请注意，更改为链接类而不是命名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>

第一组第二组第三组

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

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

请注意，更改为链接类而不是命名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>

第一组第二组第三组

maybe var span=$（“span”）.each（函数（j）{$（this.addClass（“myDiv”+j）}）；可能var span=$（“span”）.each（函数（j）{$（this.addClass（“myDiv”+j）}）；