如何處理javascript，當點擊href時，它顯示文本？

我有這樣的代碼：如何處理javascript，當點擊href時，它顯示文本？

<head> 
<link rel="stylesheet" href="style.css" type="text/css"/> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
</head> 
<script type="text/javascript"> 
function toggleDiv(divId) { 
    $("#"+divId).toggle(); 
} 
</script> 
<a href="javascript:toggleDiv('myContent');">Show comments</a><br> 
<div id="myContent"> 
    My text1 
</div> 
<a href="javascript:toggleDiv('myContent');">Show comments</a><br> 
<div id="myContent"> 
    My text2 
</div> 
<a href="javascript:toggleDiv('myContent');">Show comments</a><br> 
<div id="myContent"> 
    My text3 
</div>

我的style.css代碼：

#myContent { 
    display: none; 
}

我想的是，當我點擊第一查看評論，這表明第一個文本（我的文本1 ），然後我點擊第二查看評論，這表明第二個文本（我的文本2），然後我點擊第三查看評論，那要怎麼第三個文本（我的文字3）。而這樣的代碼是很多。

該怎麼辦，那不是：點擊第二個顯示註釋不顯示第一個文本，但顯示第二個文本？如何適應？

來源

2016-08-19 Deimantas

[___There不得多個'在'document'具有相同'id'值.___ elements'] （https://www.w3.org/TR/html-markup/global-attributes.html#common.attrs.id） – Rayon

ID必須是唯一的。重複的ID是無效的HTML。停止使用重複的ID。改用類。 – Xufox

如何做到這一點？由此改變：'$（「＃」+ divId）.toggle（）;'到'$（「。」+ divId）.toggle（）;'？ – Deimantas

使用一個或下的jquery：

<a class="showMessage">Show comments</a> 
    <div class="myContent"> 
     My text1 
    </div><br><br> 

    <a class="showMessage">Show comments</a> 
    <div class="myContent"> 
     My text2 
    </div><br><br> 

    <a class="showMessage">Show comments</a> 
    <div class="myContent"> 
     My text3 
    </div> 

$(".showMessage").click(function(ev){ 
$(this).next().toggle(); 
})

例如： https://jsfiddle.net/zm3Lg85a/?utm_source=website&utm_medium=embed&utm_campaign=zm3Lg85a

來源

2016-08-19 20:08:32

'$（this）.next（）。next（）。toggle（）;'會保留原始的HTML元素。 – Teemu

謝謝，這是我所需要的。 – Deimantas

你需要給你的#myContent的div一個唯一的標識符。

來源

2016-08-19 19:46:01

但是我有很多代碼，我不能做很多獨特的div標識符。 – Deimantas

@Deimantas你沒有得到它......你**不能**使用相同的ID **多個**標籤。無論您嘗試做什麼：ID都是獨一無二的。這就是它的工作原理:) –

它有多少並不重要，您可以隨時在ID的末尾添加數字。 –

ID必須是唯一身份：

<a href="javascript:toggleDiv('myContent1');">Show comments</a><br> 
    <div id="myContent1"> 
     My text1 
    </div> 
    <a href="javascript:toggleDiv('myContent2');">Show comments</a><br> 
    <div id="myContent2"> 
     My text2 
    </div> 
    <a href="javascript:toggleDiv('myContent3');">Show comments</a><br> 
    <div id="myContent3"> 
     My text3 
    </div>

順便說一句，這是更好地使用點擊事件。 <a onclick="toggleDiv('anId')">Show comments</a>

你可以用別的東西去：

<div> 
    <a onclick="toggle(this);">Show comments</a><br> 
    <div> 
     My text1 
    </div> 
</div> 
<div> 
    <a onclick="toggle(this);">Show comments</a><br> 
    <div> 
     My text2 
    </div> 
</div> 
<div> 
    <a onclick="toggle(this);">Show comments</a><br> 
    <div> 
     My text3 
    </div> 
</div>

和JavaScript切換功能可以使用jQuery：

function toggle(element){ 
    $(element).parent().find('div').toggle(); 
}

類似的東西會更容易維護。 未經測試。

來源

2016-08-19 19:48:18 rm4

但我有很多代碼， – Deimantas

儘可能避免使用ID。這是整個頁面唯一的ID。類更好，但如果你避免使用它們，它會更好。 '這'有很大幫助。之後，你可以從你的元素中移動，找到你想要的東西。 – rm4

如何處理javascript，當點擊href時，它顯示文本？

回答

相關問題