jQuery クリックイベントについて。

html
1<div>
2 <p><span class="plus"></span>Q&A1</p>
3 <p><span class="plus"></span>Q&A2</p>
4 <p><span class="plus"></span>Q&A3</p>
5</div>

javascript
1<script type="text/javascript">
2  $(function() {
3      $("div p").click(function () {
4
5        $('p span').removeClass('plus');
6        $("p span").addClass("minus");
7
8      });
9  });
10</script>

質問です。
Q&A開閉パネルを作っているのですが、

<p>を押した再に .plus を .minus に、開閉後、 .minus をクリックで .plus にというような+と-が動的に変化する処理をしたいと思っております。

↓初期イメージ
+あああ
+いいい
+ううう

↓開閉後イメージ
+あああ
-いいい
・hogehoge
・hogehoge
+あああ

上記コードでは
全ての要素が .minus に変化してしまいます。
クリックした場所だけ .minus にクラス名を変化することは可能ですか？

また、 .minus に変化した状態で再びクリックすると .plus に変更することは可能でしょうか？

教えて頂けると幸いです。

行動規範の内容に同意します

回答2件

javascript
1 $("div p").click(function () {
2    $('p span').removeClass('plus');
3    $("p span").addClass("minus");
4 });

クリックイベント内の
$('p span')
ですが、こう書くと「documentのルートからp要素を全て探しだし、その中のspan要素をターゲット」
という意味になってしまいます。clickのハンドラ関数の中だから。とか空気は読んでくれません。全部拾ってきてくれます。
ご質問の内容で、全てが変化してしまう、というのはこのせいだと思います。
この場合
$('p span')
ではなく
$(this).find("span").removeClass("plus");
などとする必要があると思います。

また、plus, minusクラスの付け替えについては、jqueryのtoggleClassが使えるかもしれません。

javascript
1$("p span").toggleClass("plus");

とすると、plusクラスがついていない時は付けてくれ、付いている場合は外してくれます。

投稿2015/10/12 15:53

TakuyaMitamura

総合スコア74

heetan

2015/10/13 09:47

ご丁重に解説していただきありがとうございました！分かりやすかったです！勉強して頑張ります。

行動規範の内容に同意します

html
1<!DOCTYPE HTML>
2<html lang="en-US">
3	<head>
4		<meta charset="UTF-8">
5		<title></title>
6	</head>
7	<body>
8		<div>
9			<p><span class="plus"></span>Q&A1</p>
10			<p><span class="plus"></span>Q&A2</p>
11			<p><span class="plus"></span>Q&A3</p>
12		</div>
13		<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
14		<script type="text/javascript">
15			$(function () {
16				$("div p").click(function () {
17					if ($(this).children('span').hasClass('plus')) {
18						$(this).children('span')
19								.removeClass('plus')
20								.addClass('minus');
21					} else {
22						$(this).children('span')
23								.removeClass('minus')
24								.addClass('plus');
25					}
26				});
27			});
28		</script>
29	</body>
30</html>