Question

我是Jquery语言的新手，需要为网站完成一些工作。我希望能够点击任何DIV来隐藏或取消隐藏。目前只有第一个DIV才能这样做。我的代码仅在我将div id="boxes"更改为class="boxes"时才有效，但我只能使用前者。你能帮帮我解决这个问题吗？

Jquery的

$(document).ready(function () {
      $(".hidearea").toggle();
      $(".moreinfo").text('More Info');
      $("#boxes").click(function () {

          var index = $(this).index(),

              newTargets = $('.hidearea').eq(index);
              ancTargets = $('.moreinfo').eq(index);
          $(ancTargets).text($(ancTargets).text() == 'More Info' ? 'Less Info' : 'More Info');
          newTargets.slideToggle(300)
          return false;
      })
  });

HTML

<div id="boxwrap">

  <div id="boxes" style="width:400px; min-height:200px; border:thin solid black;"> Visible area    
    <a class="moreinfo" href=""></a>    
    <div class="hidearea" style="width:200px; height:200px; border:thin solid red;">Hidden area     
    </div>  
  </div>

  <div id="boxes" style="width:400px; min-height:200px; border:thin solid black;"> Visible area    
    <a class="moreinfo" href=""></a>    
    <div class="hidearea" style="width:200px; height:200px; border:thin solid red;">Hidden area     
    </div>  
  </div>

  <div id="boxes" style="width:400px; min-height:200px; border:thin solid black;"> Visible area    
    <a class="moreinfo" href=""></a>    
    <div class="hidearea" style="width:200px; height:200px; border:thin solid red;">Hidden area     
    </div>  
  </div>

</div>

Answer 1

您可能知道，每个元素的ID必须是唯一的，并且在文档中最多只能使用一次。您通过在多个元素上（在同一文档中）具有相同的ID来违反这些规则。

话虽如此，如果您无法将ID更改为类，您可以使用属性选择器：

$(document).ready(function () {
  $(".hidearea").toggle();
  $(".moreinfo").text('More Info');
  $("[id='boxes']").click(function (e) {
      e.preventDefault();
      var index = $(this).index(),
          newTargets = $('.hidearea').eq(index),
          ancTargets = $('.moreinfo').eq(index);
      $(ancTargets).text($(ancTargets).text() == 'More Info' ? 'Less Info' : 'More Info');
      newTargets.slideToggle(300)
      return false;
  })
});

jsfiddle

Jquery - 如何单独点击交替取消隐藏和隐藏多个嵌套DIV

1 个答案: