Wie aus-/eingeblendet mehr Text in einer foreach-Schleife

Question

Mein Code ist:

<?php 
$msgArray = [ 
0=>'HTTP means HyperText Transfer Protocol.', 
1=>'HTTPS,Hyper Text Transfer Protocol Secure is the secure version of HTTP.' 
]; 
foreach ($msgArray as $key => $msg) : 
$small = substr($msg, 0, 5);?> 
<span class="lessText"><?= $small ?></span>  
<span class="fullText" style="display: none"><?= $msg ?></span> 

<sub class="viewMore" style="color:#3399ff;padding-left2%;cursor: pointer;">view more >></sub> 
<sub class="viewLess" style="color:#3399ff;padding-left2%;cursor: pointer;display: none"><< view less</sub> 
<?php endforeach; ?> 

<script type="text/javascript"> 
$(".viewMore").click(function(){ 
$(".viewMore").hide(); 
$(".lessText").hide(); 
$(".fullText").show(); 
$(".viewLess").show(); 
}); 

$(".viewLess").click(function(){ 
$(".viewLess").hide(); 
$(".fullText").hide(); 
$(".lessText").show(); 
$(".viewMore").show(); 
}); 
</script> 

Hier versuche ich, eine lange Reihe seiner ersten fünf Zeichen anzuzeigen und nach mehr klicken es sein wird, zeigte die ganze Zeichenfolge an. das funktioniert gut, wenn es nur einen gibt. Innerhalb der forEach Schleife funktioniert nicht richtig. Bitte lösen Sie dieses Problem.

Answer 1

Wickeln Sie das HTML-Fragment in einen Container.

<div class="container"> 
    <span class="lessText"><?= $small ?></span>  
    <span class="fullText" style="display: none"><?= $msg ?></span> 

    <sub class="viewMore" style="color:#3399ff;padding-left2%;cursor: pointer;">view more >></sub> 
    <sub class="viewLess" style="color:#3399ff;padding-left2%;cursor: pointer;display: none"><< view less</sub> 
</div> 

ändern Dann wird Ihr Skript DOM-Traversal-Methode zu verwenden, um das gewünschte Element zu zielen. Verwendung .closest() durchqueren zu gemeinsamer Mutter bis d.h. container dann als context oder .find()

$(".viewMore").click(function() { 
    var container = $(this).closest('.container') 
    $(".viewMore, .lessText", container).hide(); //container.find('.viewMore, .lessText').hide() 
    $(".fullText, .viewLess", container).show(); 
}); 

$(".viewLess").click(function() { 
    var container = $(this).closest('.container') 
    $(".viewLess, .fullText", container).hide(); 
    $(".lessText, .viewMore", container).show(); 
}); 

Answer 2

schreibt es in dieser Struktur verwenden, unter Verwendung von:

<?php foreach(): ?> 
<div class="holder"> 
<div class="lessText"></div> 
<div class="fullText"></div> 

<div class="viewMore"></div> 
<div class="viewLess"></div> 
</div> 
<?php endforeach; ?> 

JS:

$('.holder .viewMore').click(function(){ 
    $(this).closest('.holder').find('.lessText').hide(); 
    $(this).closest('.holder').find('.fullText').Show(); 
}); 

$('.holder .viewLess').click(function(){ 
    $(this).closest('.holder').find('.lessText').Show(); 
    $(this).closest('.holder').find('.fullText').hide(); 
});