Verketten von Text innerhalb eines "ReadMore ..." Auslösers

Question

Ich versuche, Text in GTM vollständig zu extrahieren (ein Produkt, das strukturierte Daten verwendet, yada yada). Das Problem, dem ich gegenüberstehe, ist, dass halb des Textes, den ich versuche zu extrahieren, innerhalb eines "Read More ..." - Links auf Produktseiten existiert.

Die Anordnung der Elemente auf der Seite, nachdem sie gemacht hat, sind:

<p class="product-description"> 
"This is the first part of the description of this product! It is read, warm," 
    <span class="morecontent" display="inline"> //inline when expanded, none when clicked 
    <span class="readmore-description"> 
     "fuzzy, and black." 
    </span> 
    <a class="more-link">&nsbp;Less</a> //&nsbp;Less when expanded, &nsbp;Read More.. when clicked 
    </span> 
</p> 

Ich habe nicht weit gekommen ... alles, was ich habe versucht, so weit ist:

function() { 

    var description = document.querySelector("p.product-description"); 

    return description; 

} 

Ich würde gerne bekommen "Dies ist der erste Teil der Beschreibung dieses Produkts! Es ist gelesen, warm, verschwommen und schwarz." zurück.

Danke!

Answer 1

Ich habe eine Klasse für Inhalte namens versteckt verwendet. Wenn diese Klasse existiert, wird Inhalt ausgeblendet, wenn sie nicht existiert, wird Inhalt angezeigt. Betrachten Sie es als einen Schalter.

$('.more-link').on('click', function(e){ 
 
    e.preventDefault(); 
 
    $('.morecontent').toggleClass('hidden'); 
 
    if ($('.morecontent').hasClass('hidden')) { 
 
    $('.more-link').html('More'); 
 
    } 
 
    else { 
 
    $('.more-link').html('Less'); 
 
    } 
 
});

.hidden { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p class="product-description"> 
 
"This is the first part of the description of this product! It is read, warm," 
 
    <span class="morecontent hidden" display="inline"> 
 
    <span class="readmore-description"> 
 
     "fuzzy, and black." 
 
    </span> 
 
    </span> 
 
    <a href="#" class="more-link">More</a> 
 
</p>