Question

我有这段代码：

<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）。这样的代码很多。

怎么办，不是：点击第二个显示评论不要向我显示第一个文字，但是显示第二个文字？如何适应？

Answer 1

使用Prev或Next 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

Answer 2

您需要为#myContent div提供唯一标识符。

Answer 3

Ids必须是独一无二的：

    <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 toggle函数可以使用jquery：

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

这样的东西会更容易维护。 未经过测试。

如何处理javascript，点击href时，它会显示文字？

3 个答案: