我想根據點擊的項目顯示信息。 我有一些jQuery代碼可以工作,但不是當div中有多個div時。在點擊時顯示div並在下一次點擊時隱藏
在這裏,第一部分是我想要的,第二部分不工作,因爲主div中有div。希望是有道理的。我如何使它工作?
我認爲這事做的:不是顯示/隱藏
$("#parent2").find("div:eq('" + i + "')").show().siblings().hide();
我想根據點擊的項目顯示信息。 我有一些jQuery代碼可以工作,但不是當div中有多個div時。在點擊時顯示div並在下一次點擊時隱藏
在這裏,第一部分是我想要的,第二部分不工作,因爲主div中有div。希望是有道理的。我如何使它工作?
我認爲這事做的:不是顯示/隱藏
$("#parent2").find("div:eq('" + i + "')").show().siblings().hide();
你必須切換直接後代,如果你只是find('div')
它也會發現嵌套。
所以你可以做任何這樣的:
$("#parent2 > div:eq('" + i + "')").show().siblings().hide();
或本:
$("#parent2").children("div:eq('" + i + "')").show().siblings().hide();
你應該嘗試做一個切換(),然後做的點擊,這樣的:
$(this).on('click', function() {
$("#parent1").find("div:eq('" + i + "')").toggle().siblings();
)};
您需要使用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();
});
});
此外,你不需要.each()
到事件處理程序綁定。
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");
}
);
});
我簡化了問題,顯示的一般原則,而不是具體的答案。
試試這個;)
使用一類具有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>
我會改變這使你的代碼更入店和利用的主播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>
更新使用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();
});
});
});
我認爲這會爲你的 'parent2' DIV工作:
$("#parent2").children("div:eq('" + (i) + "')").show().siblings().hide();
});
感謝您的反應!這樣可行 – thomagron