我的 Javascript 正在切换所有元素，而不仅仅是一个答案

【问题标题】：My Javascript is toggling all elements rather than just one我的 Javascript 正在切换所有元素，而不仅仅是一个
【发布时间】：2016-02-22 16:37:34
【问题描述】：

我有一个问题和答案列表。我想要一个加号/减号图标来切换，当它被点击时，答案会出现在下面。我已经编写了基本代码，但是当我单击其中一个问题的加号按钮时，它会切换答案以显示在所有问题上，而不仅仅是那个特定问题。请参阅jsfiddle。

JS：

$(".plus").click(function(){
    $(this).toggleClass("minus plus");
});

$(".plus").click(function(){
    $(".answer").toggle();
});

如何获得它，以便如果我按下问题 1 的图标，它只会显示答案 1，而不会切换其他图标？

【问题讨论】：

您需要先修复 HTML 中的错误。
有人真的很喜欢因为某种原因对所有答案都持否定态度
这是一个骗局很多次，只是很难涉足所有其他与此类似的垃圾标题问题。这是一个，但也好不到哪里去：stackoverflow.com/questions/2965718/…

标签： javascript jquery html css

【解决方案1】：

这是一个更新的 JSfiddle：https://jsfiddle.net/ocm81sv8/7/

我会这样写你的脚本：

JavaScript

$(".plus").click(function(){
    var $this = $(this);
    $this.toggleClass("minus plus");
    $this.parent().next(".answer").toggle();
});

HTML

<div class="faq-block">
    <ul>
        <li class="question">

            <p><span class="plus"></span>Question 1</p>
            <p class="answer" style="display: none;">Answer 1</p>
        </li>
        <li class="question">

            <p><span class="plus"></span>Question 2</p>
            <p class="answer" style="display: none;">Answer 2</p>
        </li>
    </ul>
</div>

我删除了同一项目的 2 个单击处理程序，并将它们放入一个调用中。

我还将您的.plus 元素更正为span 标签，因为像div 这样的块级元素在p 标签内是无效的。

【讨论】：

我无法理解为什么我的回答被否决了？我已经通过代码示例和更改说明为 OP 的问题提供了一个可行的解决方案。奇怪。
我也不确定你为什么被否决。这完美地解决了我的问题。感谢您的帮助迈克尔。
@S.Brown 我想也许回答的人也这样做是为了让他们的答案被接受。如果是这样的话就太小气了！很高兴它对你有效。当然有更优雅的方式来做你想要实现的目标，但我想这已经足够了。如果您需要进一步帮助了解任何更改，请告诉我。

【解决方案2】：

Updated Fiddle

您应该将<p><div class="plus"></div>Question 1</p> 替换为<p><span class="plus"></span>Question 1</p>，因为<p><div></div></p> 不是有效的HTML 代码，请查看以下帖子Putting <div> inside <p> is adding an extra <p>。

您应该通过单击.plus 切换相关答案，因此您可以使用closest('li') 获取父question 然后.find(".answer") 来定位相关答案：

$(".plus").click(function(){
    $(this).closest('li').find(".answer").toggle();
});

而不是：

$(".plus").click(function(){
    $(".answer").toggle();
});

希望这会有所帮助。

$(".plus").click(function(){
  $(this).toggleClass("minus plus").closest('li').find(".answer").toggle();
});

.faq-block ul, .faq-block ul li {
	list-style-type: none !important;
}
span.plus {
	display: block;
	width: 30px;
	height: 30px;
	background-color: red;
	float:left;
	margin-right: 20px;
	cursor:pointer;
}
span.minus {
	display: block;
	width: 30px;
	height: 30px;
	background-color: blue !important;
	float:left;
	margin-right: 20px;
	cursor:pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="faq-block">
  <ul>
    <li class="question">

      <p><span class="plus"></span>Question 1</p>
      <p class="answer" style="display: none;">Answer 1</p>
    </li>
    <li class="question">

      <p><span class="plus"></span>Question 1</p>
      <p class="answer" style="display: none;">Answer 1</p>
    </li>
  </ul>
</div>

【讨论】：

【解决方案3】：

您已经在使用$(this) 来获取当前点击的元素，但仍然无法使用它来获取正确的目标，这让我很难过...

首先要做的事情。在<p> 标记中包含<div> 是无效的，这会导致JSFiddle 突出显示这些错误。它可以通过使用<span> 而不是<div> 来修复。

现在，至于进行切换，只需在 DOM 中导航即可：

$(this).closest(".question").find(".answer").toggle();

向上导航到.question，然后返回到.answer，并切换它。

https://jsfiddle.net/ocm81sv8/3/

【讨论】：

【解决方案4】：

https://jsfiddle.net/ocm81sv8/8/

$(".plus").on('click', function() { 
  $(this).toggleClass("minus plus")
  .closest('li').find(".answer").toggle();
});

这将确保如果您单击 plus 元素，它只会切换自己的项目，然后找到要显示的答案。

【讨论】：

【解决方案5】：

您需要使用更具体的选择器。目前，您正在使用类选择器“.plus”，这将是您所有问题的共同点。它不是唯一标识符。您的代码将匹配适合您的选择器范围的所有元素。要了解我的意思，只需在该页面的 chrome 控制台中输入 $(".plus") 即可。它将返回一个由所有匹配的元素组成的数组。

我的建议是为每个问题添加一个唯一的 id，所以可能是“question-0”、“question-1”……等等，然后使用选择器“#question-X”来切换它。

希望对您有所帮助，祝你好运

【讨论】：