Question

我想根据点击的项目显示信息。我有一些jquery代码可以工作，但不是当div中有多个div时。

这里，第一部分是我想要的，第二部分不起作用，因为主div中有div。希望有道理。我如何使其发挥作用？

我认为这与某些事情有关：

$("#parent2").find("div:eq('" + i + "')").show().siblings().hide();

Fiddle

Answer 1

你必须切换直接后代，如果你只是find('div')它也会发现嵌套。

所以你可以这样做：

$("#parent2 > div:eq('" + i + "')").show().siblings().hide();

或者这个：

$("#parent2").children("div:eq('" + i + "')").show().siblings().hide();

Answer 2

您需要使用children()代替.find()，.index(element)可用于显示index锚元素。

$(document).ready(function() {
    $('#div1, #div2, #div3, #div4').hide();
    $('#div5, #div6, #div7, #div8').hide();

    $(".firstpart a").click(function() {
        $("#parent1").children("div").eq($(".firstpart a").index(this)).show().siblings().hide();
    });
    $(".secondpart a").click(function() {
        $("#parent2").children("div").eq($(".secondpart a").index(this)).show().siblings().hide();
    });
});

Fiddle

此外，您不需要.each()绑定事件处理程序。

Answer 3

https://jsfiddle.net/5yyrojsq/4/您应该尝试使用声明式JS并使用类而不是ID来匹配元素。

Service

和JS

<div class="firstpart">
  <a href="#" data-show="div1" class="btn">show div1</a>
  <a href="#" data-show="div2" class="btn">show div2</a>
  <a href="#" data-show="div3" class="btn">show div3</a>
  <a href="#" data-show="div4" class="btn">show div4</a>
</div>
<div id="parent1">
  <div id="div1" class="child_div">hello1</div>
  <div id="div2" class="child_div">hello2</div>
  <div id="div3" class="child_div">hello3</div>
  <div id="div4" class="child_div">hello4</div>
</div>

我简化了问题，以显示一般原则而不是具体答案。

Answer 4

您应该尝试执行toggle（）而不是show / hide，然后点击这样做，如下所示：

$(this).on('click', function() {
   $("#parent1").find("div:eq('" + i + "')").toggle().siblings();
)};

Answer 5

试试这个;）

使用带div的类在eq()

中访问它们

$(document).ready(function() {
  var $parent1 = $("#parent1");
  var $parent2 = $("#parent2");
  $(".firstpart a").each(function(i) {
    $(this).click(function() {
      $('.item:visible', $parent1).hide();
      $parent1.find("div:eq('" + i + "')").show();
    });
  });

  $(".secondpart a").each(function(i) {
    $(this).click(function() {
      $('.item:visible', $parent2).hide();
      $parent2.find("div.item:eq('" + i + "')").show();
    });
  });
});

.item {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="firstpart">
  <a href="#">show div1</a>
  <a href="#">show div2</a>
  <a href="#">show div3</a>
  <a href="#">show div4</a>
</div>
<div id="parent1">
  <div id="div1" class="item">hello1</div>
  <div id="div2" class="item">hello2</div>
  <div id="div3" class="item">hello3</div>
  <div id="div4" class="item">hello4</div>
</div>

<br>
<br>
<br>

<div class="secondpart">
  <a href="#">show div5</a>
  <a href="#">show div6</a>
  <a href="#">show div7</a>
  <a href="#">show div8</a>
</div>
<div id="parent2">
  <div id="div5" class="item">
    <div class="row5">hello5</div>
  </div>
  <div id="div6" class="item">
    <div class="row6">hello6</div>
  </div>
  <div id="div7" class="item">
    <div class="row7">hello7</div>
  </div>
  <div id="div8" class="item">
    <div class="row8">hello8</div>
  </div>
</div>

Answer 6

我会改变它以使您的代码更易于访问并使用锚点href：

// probably want to change this to target a class rather than all anchors
$("a").click(function(e) {
  e.preventDefault(); // stop default action of anchor
  $($(this).attr('href')).show().siblings().hide(); // show the targetted div and hide it's siblings
});

.parent > div {display:none;} /*start divs hidden*/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="firstpart">
  <a href="#div1">show div1</a> <!-- give anchors href of the div they are targeting, maybe a class too -->
  <a href="#div2">show div2</a>
  <a href="#div3">show div3</a>
  <a href="#div4">show div4</a>
</div>
<div id="parent1" class="parent">
  <div id="div1">hello1</div>
  <div id="div2">hello2</div>
  <div id="div3">hello3</div>
  <div id="div4">hello4</div>
</div>

<br><br><br>

<div class="secondpart">
  <a href="#div5">show div5</a>
  <a href="#div6">show div6</a>
  <a href="#div7">show div7</a>
  <a href="#div8">show div8</a>
</div>
<div id="parent2" class="parent">
  <div id="div5"><div class="row5">hello5</div></div>
  <div id="div6"><div class="row6">hello6</div></div>
  <div id="div7"><div class="row7">hello7</div></div>
  <div id="div8"><div class="row8">hello8</div></div>
</div>

Answer 7

使用toggle()代替show()和hide()

更新了您的相同代码段

<强> HTML

<div class="firstpart">
  <a href="#">show div1</a>
  <a href="#">show div2</a>
  <a href="#">show div3</a>
  <a href="#">show div4</a>
</div>
<div id="parent1">
  <div id="div1">hello1</div>
  <div id="div2">hello2</div>
  <div id="div3">hello3</div>
  <div id="div4">hello4</div>
</div>

<br><br><br>

<div class="secondpart">
  <a href="#">show div5</a>
  <a href="#">show div6</a>
  <a href="#">show div7</a>
  <a href="#">show div8</a>
</div>
<div id="parent2">
  <div id="div5">hello5</div>
  <div id="div6">hello6</div>
  <div id="div7">hello7</div>
  <div id="div8">hello8</div>
</div>

<强>的jQuery

$(document).ready(function(){

    $('#div1, #div2, #div3, #div4').toggle();

    $(".firstpart a").each(function(i) {
        $(this).click(function() {
            $("#parent1").find("div:eq('" + i + "')").toggle().siblings();
        });
    });
});
$(document).ready(function(){

    $('#div5, #div6, #div7, #div8').toggle();

    $(".secondpart a").each(function(i) {
        $(this).click(function() {
            $("#parent2").find("div:eq('" + i + "')").toggle().siblings();
        });
    });
});

Fiddle

Answer 8

我认为这适用于您的父母2＆＃39; DIV：

{{1}}

单击显示div并在下一次单击时隐藏

8 个答案: