同名のクラスを別々に処理したい。

宜しくお願いいたします。
javascriptでちょっとしたread moreの機能を付与しております。
.reをクリックしますと、.conect_hide内のテキストが表示される仕組みです。
この状態では、例えばいずれかの.reをクリックすると全てのread moreエリアが表示されてしまいます。
個別のコンテンツ内で操作したい場合はどうすればいいでしょうか？

<script>
$(function(){
	$(".conent_hide").hide();
	$(".re").click(function(){ 
		x=$(".re").text();
		$(".conent_hide").slideToggle( function(){
			if(x == "続きを読む"){
				$(".re").text("続きを読む").css({color:"red"});
			}
			else{
				$(".re").text("閉じる").css({color:"green"});
			}
		});
	});
});
</script>


<dl>
	<dt>AAA</dt>
	<dd>
		<p>AAAのテキスト<div class="conent_hide">AAAのreadmoreテキスト</div></p>
		<span class="re">続きを読む</span>
	</dd>
</dl>

<dl>
	<dt>BBB</dt>
	<dd>
		<p>BBBのテキスト<div class="conent_hide">BBBのreadmoreテキスト</div></p>
		<span class="re">続きを読む</span>
	</dd>
</dl>

退会済みユーザー

2017/06/28 15:05

インデントをつけてください。

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

回答1件

ベストアンサー

javascript
1$(function(){
2    $(".conent_hide").hide();
3    $(".re").click(function(){ 
4        var $this = $(this); // この時点の this はイベントが発生したノードです
5        $(".conent_hide", $this.parent()).slideToggle(function() {
6            if($this.text() == "続きを読む"){
7                $this.text("閉じる").css({color:"green"});
8            } else {
9                $this.text("続きを読む").css({color:"red"});
10            }
11        });
12    });
13});