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

-2

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

在这里，第一部分是我想要的，第二部分不工作，因为主div中有div。希望是有道理的。我如何使它工作？

我认为这事做的：不是显示/隐藏

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

Fiddle

来源

2016-10-20 thomagron

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

所以你可以做任何这样的：

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

或本：

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

来源

2016-10-20 11:09:01 Aiphee

你应该尝试做一个切换（），然后做的点击，这样的：

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

来源

2016-10-20 11:08:16 Tyrannogina

您需要使用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()到事件处理程序绑定。

来源

2016-10-20 11:09:50 Satpal

感谢您的反应！这样可行 – thomagron

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

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

和JS

$(document).ready(function(){ 

    $('.child_div').hide(); 

    $(".btn").click(
    function() { 
     $('.child_div').hide(); 
     var the_div_id_to_show = $(this).attr("data-show"); 
     $("#" + the_div_id_to_show).show("slow"); 
    } 
); 

});

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

来源

2016-10-20 11:10:49

试试这个;）

使用一类具有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>

来源

2016-10-20 11:11:16 itzmukeshy7

我会改变这使你的代码更入店和利用的主播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>

来源

2016-10-20 11:16:37 Pete

更新使用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

来源

2016-10-20 11:19:29 shishir

我认为这会为你的 'parent2' DIV工作：

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

来源

2016-10-20 11:23:16

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

回答

相关问题