javascript - 安装显示更多或更少脚本时未捕获的 ReferenceError

Question

我有以下来自jquery 脚本演示的代码，用于在页面上显示更多或更少的文本：

<script src="js/show-hide-text.js"></script>

    <script>
        var th = new showHideText('.my-message', {
            charQty     : 250,
            ellipseText : "...",
        });
    </script>
    <script type="text/javascript">

我将他们的 js 文件包含show-hide-text.js在我自己的 js 文件编译中。我按照他们的示例将类添加到 html 中<div class="my-message">content content content</div>。然后我通过将其添加到我的 js 文件中来调用它：

/**
 * 2007-2017 PrestaShop
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the Academic Free License 3.0 (AFL-3.0)
 * that is bundled with this package in the file LICENSE.txt.
 * It is also available through the world-wide-web at this URL:
 * https://opensource.org/licenses/AFL-3.0
 * If you did not receive a copy of the license and are unable to
 * obtain it through the world-wide-web, please send an email
 * to [e-mail] so we can send you a copy immediately.
 *
 * DISCLAIMER
 *
 * Do not edit or add to this file if you wish to upgrade PrestaShop to newer
 * versions in the future. If you wish to customize PrestaShop for your
 * needs please refer to http://www.prestashop.com for more information.
 *
 * @author    PrestaShop SA <[e-mail]>
 * @copyright 2007-2017 PrestaShop SA
 * @license   https://opensource.org/licenses/AFL-3.0 Academic Free License 3.0 (AFL-3.0)
 * International Registered Trademark & Property of PrestaShop SA
 */

import UIkit from 'uikit';                              
import Icons from 'uikit/dist/js/uikit-icons.min';      
import './plugins/jquery.lettering';                        
import './plugins/jquery.simpleTicker';                     
import './plugins/show-hide-text';                      


import 'bootstrap-touchspin';

import './checkout';
import './customer';
import './listing';
import './product';
import './cart';
import Form from './components/form';
import ProductMinitature from './components/product-miniature';
import ProductSelect from './components/product-select';
import prestashop from 'prestashop';
import EventEmitter from 'events';
import './lib/bootstrap-filestyle.min';
import './lib/jquery.scrollbox.min';
import './components/block-cart';


// "inherit" EventEmitter
for (var i in EventEmitter.prototype) {
  prestashop[i] = EventEmitter.prototype[i];
}

window.UIkit = UIkit;                                   
UIkit.use(Icons);                                       

$(document).ready(() => {
    //let dropDownEl = $('.js-dropdown');
    const form = new Form();
    //let topMenuEl = $('.js-top-menu ul[data-depth="0"]');
    //let dropDown = new DropDown(dropDownEl);
    //let topMenu = new TopMenu(topMenuEl);
    let productMinitature = new ProductMinitature();
    let productSelect  = new ProductSelect();
    //dropDown.init();
    form.init();
    //topMenu.init();
    productMinitature.init();
    productSelect.init();

    //Lettering
    $(".fancy-price").lettering();  

    //Category Page Toggle Filter Button Class and Icon for Mobile
    $('.green-btn').click(function() {
        var $span = $(this).find(".toggle-icon");
        if ($span.attr("uk-icon") === "chevron-down") {
            $span.attr("uk-icon", "chevron-up")
        } else {
            $span.attr("uk-icon", "chevron-down")
        }
        $(this).toggleClass("green-btn red-btn");
    });
    //Toggle Filter Button class and icon

    // jQuery.simpleTicker - Slide Effect
    $.simpleTicker($("#ticker-slide"),{'effectType':'slide'});  

    // Show and Hide More Texts
    var th = new showHideText('.minimize-text', {
        charQty     : 100,
        ellipseText : "...",
        moreText    : "Read more",
        lessText    : "Read less"       
    }); 
});

但它没有奏效。相反，我得到了Uncaught ReferenceError: showHideText is not defined message。我没有在遵循他们的例子时错过了什么

标签： javascriptjqueryhtml

Answer 1

如果您使用的是 jquery，它应该可以工作，那么您必须包括

1 - jquery.js
2-  show-hide-text.js

我刚刚禁用了代码片段中的其他脚本，以向您展示它在您的代码中的工作方式，这些脚本应该在jquery.js

$(".fancy-price").lettering();   
$.simpleTicker($("#ticker-slide"),{'effectType':'slide'});

$(document).ready(() => {
    // jQuery.simpleTicker - Slide Effect
   // $.simpleTicker($("#ticker-slide"),{'effectType':'slide'});  

    //Lettering
    // $(".fancy-price").lettering();   

    // Show and Hide More Texts
    var th = new showHideText('.my-message', {
        charQty     : 100,
        ellipseText : "...",
        moreText    : "Read less",
        lessText    : "Read more"       
    }); 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://www.jqueryscript.net/demo/Show-Hide-Long-Text-Max-Length-jQuery/js/show-hide-text.js"></script>

<div class="my-message">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium, cumque, modi. Sint dolore, fugiat asperiores, fuga nulla commodi delectus natus, beatae porro earum dicta. Culpa blanditiis quis adipisci recusandae mollitia.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium, cumque, modi. Sint dolore, fugiat asperiores, fuga nulla commodi delectus natus, beatae porro earum dicta. Culpa blanditiis quis adipisci recusandae mollitia.
</div>