Question

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

JS：

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

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

我如何得到它，如果我按问题1的图标，它只显示答案1，并且不切换其他图标？

Answer 1

<强> 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>

Answer 2

这是一个更新的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标记内的块级元素无效。

Answer 3

你已经使用$(this)来获取当前点击的元素，但仍未能使用它来获得正确的目标这一事实让我很难过......

首先要做的事情。在<div>标记内放置<p>无效，导致JSFiddle突出显示这些错误。可以使用<span>代替<div>修复此问题。

现在，至于进行切换，只需浏览DOM：

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

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

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

Answer 4

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

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

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

Answer 5

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

我的建议是为每个问题添加一个唯一的ID，所以也许像＃34; question-0＆＃34;，＆＃34; question-1＆＃34; ...等等，然后使用选择器＆＃34;＃question-X＆＃34;切换它。

希望有帮助，祝你好运

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

5 个答案: