簡単なJQueryコマンドが機能しない

Question

現在、私はJavascriptとJQueryを理解するのに苦労しています。ここに私がやろうとしていることがあります：

長い項目の説明の末尾を省略記号に置き換えてください。私はそれが私が持っている多くの項目の説明のために動作するようにします。

私はそれをやってみましたが、完全に失敗し、jquery.ellipsisプラグインを使用しようとしました。 \ jquery.ellipsis-master \ jquery.ellipsis-master \ src \ jquery.ellipsis.jsをリンクすると、コードが実行されなくなっているようです。アラートは表示されません。

<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(); 
        }); 

       }); 

Githubからどのファイルを使用するのですか？省略記号のプラグインは、https://github.com/bebraw/jquery.ellipsis

Answer 1

src属性を持つ<script>要素にJSコードを配置することはできません。それはどちらか一方です。あなたがあなた自身の<script />のタグを追加する必要が必要なものを行うには、次のように：

<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

のようになります。スクリプトがHTMLの中にある場合は、<script></script>タグの中に入れる必要があります。これは、基本的に、これらのタグの間のものはすべてJSであることをブラウザに伝えています。スクリプトへの外部リンクは、外部JSファイルへのリンクを定義するために使用されます。あなたはこの

<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> 

乾杯と幸せなコーディングを行う場合、それが動作する方法を正確にJSがhttp://docstore.mik.ua/orelly/webprog/jscript/ch12_02.htm

を埋め込まれている説明この詳細な記事をチェックアウトすることができます！