Zeige mehr mit PHP-Schleife und Jquery

Question

Ich bin eine Schleife über vierzig Strings mit PHP. Ich verwende derzeit substr(), um nur die ersten 170 Zeichen anzuzeigen. Ich verwende jQuery, um den Rest der Zeichenfolge zu verbergen und einen Link zu erstellen, um den Rest anzuzeigen. Dies ist der Code, den ich Looping bin:

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

Hier ist die jQuery:

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

Dieser Code funktioniert, aber ich dies nur möchte „mehr“ für die einzelnen Strings. Gerade jetzt, weil ich den Klassenselektor benutze, wenn ich auf "zeige mehr" klicke, wird "mehr angezeigt" für jede Instanz in der Schleife.

Gibt es eine Möglichkeit, nur "mehr zu zeigen" für die Instanz der Schleife, auf die ich klicke?

Answer 1

benötigen Sie $(this) und 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>