JQuery：單擊以顯示隱藏單獨的段落

Question

我正在嘗試創建一個網站，其中包含可供選擇的摘要段落以獲取更多關於點擊的信息。我用這個代碼做了這個。

$(document).ready(function() { 
$("#here").hide(); 
$("#show").click(function() { 
    $("#here").show(); 
    $("#icond").hide(); 
}); 

$("#hide").click(function() { 
    $("#here").hide(); 
    $("#icond").show(); 
}); 

我的問題是，我希望能夠在不同div/p元素的頁面中多次執行此操作。

當我試圖用類來做這件事的時候，它會同時打開/關閉所有的東西。我知道的唯一解決方案是爲每個id重新輸入函數。

還有別的辦法嗎？

在此先感謝！

https://jsfiddle.net/58roy7hg/

Answer 1

你將不得不使用this關鍵字，然後用tree traversal目標要顯示和隱藏如上的回答表明特定元素。我會給你的一些額外提示是：

1. 避免多次使用document.ready。
2. 我建議使用.on而不是.click，因爲它更通用，可以深入到動態添加的元素。
3. 避免使用id太多;這是用於在整個頁面中不重複的元素（例如導航欄）。您的大部分id都可以替換爲class。

嘗試這個示例：jsfiddle

我迅速做了一個樣品（用我自己的標記），以顯示你的，這樣你就可以重新利用它，如你所願，但我肯定會推薦檢查出獲得感覺的文檔。

Answer 2

只需使用可變this爲了與特定事件源元件工作。相對識別所有其他元素。我假設你將有每個塊相同的結構。注意我已經爲每個塊<p/>標記添加了一個container類。

$(document).ready(function() { 
 
    $(".here").hide(); 
 
    $(".show").click(function() { 
 
     var container = $(this).closest(".container"); 
 
     container.find(".here").show(); 
 
     container.find(".icond").hide(); 
 
    }); 
 

 
    $(".hide").click(function() { 
 
     var container = $(this).closest(".container"); 
 
     container.find(".here").hide(); 
 
     container.find(".icond").show(); 
 
    }); 
 
});

p { 
 
    width:70%; 
 
    padding-left:20px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<p class="container">This is my main text, this will display as a normal paragraph. If someone needs more information  <span class="show"> they would click here <i class="icond" class="fa fa-angle-down" aria-hidden="true">v</i></span> 
 
    <span class="here"><br><span class="hide"><strong>Wow!</strong> Clicking brings up more information. When they've had enough, they'll click again and it'll go away. 
 
    <i class="fa fa-angle-up" aria-hidden="true">^</i> 
 
    </span></span> 
 
</p> 
 

 
<p class="container">This is great and works exactly as I want it too but there is a problem <span class="show"> ... 
 
    <i class="icond" class="fa fa-angle-down" aria-hidden="true">v</i></span> 
 
    <span class="here"><br><span class="hide">I need this to work over and over for different paragraphs individually. 
 
    <i class="fa fa-angle-up" aria-hidden="true">^</i> 
 
    </span></span> 
 
</p> 
 
<p class="container">Targeting classes resulted in all paragraphs colapsing at the same time<span class="show"> and 
 
    <i class="icond" class="fa fa-angle-down" aria-hidden="true">v</i></span> 
 
    <span class="here"><br><span class="hide">Rewriting the function for a new set of ids each time cant be the best way to do this... 
 
    <i class="fa fa-angle-up" aria-hidden="true">^</i> 
 
    </span></span> 
 
</p> 
 
<p class="container"><span class="show"> Please help! 
 
    <i class="icond" class="fa fa-angle-down" aria-hidden="true">v</i></span> 
 
    <span class="here"><br><span class="hide">I'm just starting out with JS, please be kind.. 
 
    <i class="fa fa-angle-up" aria-hidden="true">^</i> 
 
    </span></span> 
 
</p>

Answer 3

最好的解決辦法可能取決於你是如何創建的頁面（PHP，HTML直？）。一些香草javascript給你。當我通過php創建一個頁面時，我使用了類似的東西，但是對於html來說，它的工作原理是一樣的。

<div onclick="myDropdown('extraSummary1');">my visible text -click for 
more</div> 
<div id="extraSummary1" style="display: none;">hidden extra text</div> 
<script> 
function myDropdown(theDiv){ 
if (document.getElementById(theDiv).style.display=='none') 
    { document.getElementById(theDiv).style.display='block'; } 
else { document.getElementById(theDiv).style.display='none'; } 
</script>