javascript - 无法让简单的 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

你不能把你的JS代码放在 <script> 中具有 src 的元素属性。这是其中之一或另一个。要执行您需要的操作，您必须添加自己的 <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>