在點擊時顯示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並在下一次點擊時隱藏

回答

相關問題