Ich kann keine einfachen JQuery-Befehle erhalten

Question

Ich habe eine Menge Probleme, Javascript und JQuery im Moment zu verstehen - sie verursachen mir große Kopfschmerzen. Hier ist, was ich versuche zu tun:

Ersetzen Sie das Ende der langen Artikelbeschreibungen mit Ellipsen. Ich möchte, dass es für so viele Artikelbeschreibungen funktioniert, die ich habe.

Ich versuchte es selbst, komplett fehlgeschlagen, dann versuchte, ein jquery.ellipsis Plugin zu verwenden. Die Verknüpfung von \ jquery.ellipsis-master \ jquery.ellipsis-master \ src \ jquery.ellipsis.js scheint meinen Code überhaupt nicht ausgeführt zu haben. Die Warnung wird nicht angezeigt.

<p class="ideaText">Phasellus lacinia ... est.</p> 
<p class="ideaText">Lalalalalala ... lalalala.</p> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 

<script src="jquery.ellipsis.js" type="text/javascript"> 

       alert("JS works"); 

       $(document).ready(function() { 

        function pTruncate() { 
         $('.ideaText').each(function() { 

          $(this).ellipsis({visible: 3, more: '…', moreClass: 'more', separator: ' ', atFront: false}); 

         }); 
        }; 

        pTruncate(); 

        $(window).resize(function() { 
         pTruncate(); 
        }); 

       }); 

Kann jemand erklären, welche Datei von Github ich verwenden soll? Das Ellipsen-Plugin ist von https://github.com/bebraw/jquery.ellipsis

Answer 1

Sie können Ihren JS-Code nicht in ein <script>-Element mit einem src-Attribut einfügen. Es ist das eine oder andere. Zu tun, was Sie brauchen, haben Sie Ihre eigene <script /> Tag hinzuzufügen, wie folgt aus:

<p class="ideaText">Phasellus lacinia ... est.</p> 
<p class="ideaText">Lalalalalala ... lalalala.</p> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>  
<script src="jquery.ellipsis.js" type="text/javascript"></script> 
<script> 
    alert("JS works"); 

    $(document).ready(function() { 
     function pTruncate() { 
      $('.ideaText').each(function() { 
       $(this).ellipsis({ 
        visible: 3, 
        more: '…', 
        moreClass: 'more', 
        separator: ' ', 
        atFront: false 
       }); 
      }); 
     }; 

     pTruncate(); 

     $(window).resize(function() { 
      pTruncate(); 
     }); 
    }); 
</script> 

Answer 2

Sie müssen Ihr Skript in eine <script></script>-Tag setzen, wenn es in Ihrem HTML ist. Dies sagt dem Browser, dass zwischen diesen Tags alles JS ist. Die externe Verknüpfung zu einem Skript wird verwendet, um eine Verknüpfung zu einer externen JS-Datei zu definieren. Sie können diesen ausführlichen Artikel überprüfen, die erklärt, wie genau JS http://docstore.mik.ua/orelly/webprog/jscript/ch12_02.htm eingebettet ist

Es wird funktionieren, wenn Sie dies tun

<p class="ideaText">Phasellus lacinia ... est.</p> 
<p class="ideaText">Lalalalalala ... lalalala.</p> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 

<script src="jquery.ellipsis.js" type="text/javascript"></script> 

<script> 
    alert("JS works"); 
    $(document).ready(function() { 
      function pTruncate() { 
       $('.ideaText').each(function() { 
       $(this).ellipsis({visible: 3, more: '…', moreClass: 'more', separator: ' ', atFront: false}); 
         }); 
        }; 

       pTruncate(); 
       $(window).resize(function() { 
         pTruncate(); 
        }); 

       }); 
</script> 

Prost und glücklich Codierung!