jQuery implementiert Funktionen zum Reduzieren und Erweitern von Artikeln

Dieses Artikelbeispiel teilt den spezifischen Code von jQuery, um die Funktionen zum Reduzieren und Erweitern des Artikels zu Ihrer Information zu realisieren. Der spezifische Inhalt ist wie folgt

Kommen wir ohne weitere Umschweife direkt zum Code

<!DOCTYPE html>
<html lang="de">
 <Kopf>
  <meta charset="UTF-8">
  <title>Artikel</title>
 </Kopf>
 <Text>
  <div>
   <p>Artikel-Ein- und Ausblendfunktion</p>
   <div Klasse="Artikel">
    <div>
     <div style="color: #409EFF;">Überschreitet die Wortgrenze</div>
     <span class="Artikel">
      MQTT ist ein leichtes, proxybasiertes Publish/Subscribe-Nachrichtenübertragungsprotokoll, das offen, einfach, leicht und leicht zu implementieren ist.
      Diese Funktionen machen es für den Einsatz in eingeschränkten Umgebungen geeignet. Netzwerke sind teuer, haben eine geringe Bandbreite und sind unzuverlässig.
      Läuft auf eingebetteten Geräten mit begrenzten Prozessor- und Speicherressourcen. Die Merkmale dieser Vereinbarung sind:
      Verwenden Sie das Publish/Subscribe-Messaging-Modell, um die Veröffentlichung von Eins-zu-vielen-Nachrichten zu ermöglichen und Anwendungen zu entkoppeln.
      Nachrichtenübertragung mit abgeschirmtem Nutzlastinhalt.
      Bietet Netzwerkkonnektivität über TCP/IP.
     </span>
     <span class="siehe" style="Farbe: #409EFF;"></span>
    </div>
   </div>
   <br />
   <div Klasse="Artikel">
    <div>
     <div style="color: #409EFF;">Überschreitet nicht die Wortanzahl</div>
     <span class="article">ABCDEFGHIJKLNMOPQRSTUVWXYZ</span>
     <span class="siehe" style="Farbe: #409EFF;"></span>
    </div>
   </div>
   <br />
   <div Klasse="Artikel">
    <div>
     <div style="color: #409EFF;">Überschreitet die Wortgrenze</div>
     <span class="Artikel">
      Die Richtigkeit des MOS wirkt sich direkt auf die normale Verwendung der Festplatte aus und bezieht sich hauptsächlich auf den Festplattentyp.
      Glücklicherweise unterstützen alle aktuellen Maschinen die Funktion „IDE Auto Detect“, die den Festplattentyp automatisch erkennen kann.
      Wenn Sie eine neue Festplatte anschließen oder die Festplatte durch eine neue ersetzen, müssen Sie mit dieser Funktion den Typ zurücksetzen.
      Natürlich können einige Motherboard-Typen den Festplattentyp mittlerweile automatisch erkennen.
      Wenn der Festplattentyp falsch ist, kann das System manchmal überhaupt nicht gestartet werden. Manchmal lässt es sich zwar starten, es treten jedoch Lese- und Schreibfehler auf.
     </span>
     <span class="siehe" style="Farbe: #409EFF;"></span>
    </div>
   </div>
  </div>
 </body>
 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
 <Skripttyp="text/javascript">
  $(Dokument).bereit(Funktion(){
   //Den aktuellen Status des Artikels aufzeichnen var onoff = false;
   //Verwenden Sie $().each, um jeden Artikel zu durchlaufen und festzulegen$('.item').each(function() {
    //Verwenden Sie $(this).find(), um das aktuelle Artikel-DOM abzurufen
    var Artikel = $(this).find('.article');
    //Artikelinhalt abrufen var str = article.text();
    //Verwenden Sie $(this).find(), um das erweiterte und reduzierte DOM abzurufen
    var siehe = $(this).find('.see');
    //Wenn der Artikel mehr als 50 Wörter hat, werden nur die ersten 50 Wörter angezeigt if (str.length > 50) {
     Artikel.Text(str.substr(0, 50) + '......');
     see.text('[Ansicht]'); //Den Ansichtsbutton am Ende des Artikels anzeigen}
    //Button-Listener festlegen see.click(function() {
     wenn (anaus) {
      Artikel.Text(str.substr(0, 50) + '......');
      siehe.text('[Ansicht]');
     } anders {
      Artikel.text(str);
      siehe.text('[Bearbeiten]');
     }
     anaus = !anaus
    });
   });
  });
 </Skript>
</html>

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

Das könnte Sie auch interessieren: