Question

我在jquery script演示中使用以下代码来显示更多内容或在页面上显示较少的文字：

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

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

我在他自己的js文件编译中包含了他们的js文件show-hide-text.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 license@prestashop.com 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 <contact@prestashop.com>
 * @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"       
    }); 
});

但它没有奏效。相反，我得到了一个未捕获的ReferenceError：showHideText未定义消息。我没有按照他们的例子我错过了

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>

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

1 个答案: