もっと見るphpループとjquery

Question

私はphpを使って約40の文字列をループしています。私は現在substr()を使用して最初の170文字のみを表示しています。私はjQueryを使用して残りの文字列を隠し、残りの部分を表示するリンクを作成しています。 jQueryのです

ここ

echo "<span>" . $substring_1 . "</span><span class='dotdot'>...</span><span class='readmore'>" . $substring_2 . "</span><a href='#' class='clickmore'>Show more</a>"; 

：：これは私がループしていたコードでこのコードは動作します

$(document).ready(function() { 
    $(".readmore").hide(); 
    $(".clickmore").click(function() { 
     $(".dotdot").hide(); 
     $(".readmore").show(); 
    }); 
}); 

、しかし、私は、個々の文字列は、「詳細を表示し、」これをしたいと思います。今は、クラスセレクタを使用しているので、「もっと見る」をクリックすると、ループ内のすべてのインスタンスに対して「より多くを表示します」。

クリックするループのインスタンスに対してのみ「詳細を表示」する方法はありますか？

Answer 1

あなたには、いくつかの理由$(this)とprev()

$(document).ready(function() { 
    $(".readmore").hide(); 
    $(".clickmore").click(function() { 
     $(this).prev().prev(".dotdot").hide();  //<<<<<<<<<<<<<<< 
     $(this).prev(".readmore").show(); //<<<<<<<<<<<<<<< 
    }); 
}); 

$(document).ready(function() { 
 
    $(".readmore").hide(); 
 
    $(".clickmore").click(function() { 
 
     $(this).prev().prev(".dotdot").hide();  //<<<<<<<<<<<<<<< 
 
     $(this).prev(".readmore").show(); //<<<<<<<<<<<<<<< 
 
     $(this).hide(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<span>This is</span><span class='dotdot'>...</span><span class='readmore'> Complete string</span><a href='#' class='clickmore'>Show more</a> 
 

 
<hr /> 
 
<span>This is</span><span class='dotdot'>...</span><span class='readmore'> Complete string</span><a href='#' class='clickmore'>Show more</a> 
 

 
<hr /> 
 
<span>This is</span><span class='dotdot'>...</span><span class='readmore'> Complete string</span><a href='#' class='clickmore'>Show more</a>