Question

我使用以下代码自动缩短包含大量文本的div元素。它缩写了第一段并添加了一个＆＃34; Read More＆＃34;链接。这样工作正常，＆＃34; Read less＆＃34;链接，在内容展开后显示。然而，＆＃34;阅读更多＆＃34;链接第二次单击时不起作用。

在下面的代码中是否存在可能导致此问题的JavaScript错误？（经过移动测试，iOS模拟器测试。）

function ExpandableContent(container, userSettings) {

        /************ Validation *************/ 

        if (!this.constructor || !this.constructor instanceof ExpandableContent) {
            return new ExpandableContent(container, userSettings); 
        }
        if (typeof container !== 'object') {
            console.error("Must provide DOM element.");
            return; 
        }
        if (!container.find('p').first().length) {
            console.error("Containing element must include at least one paragraph element.");
            return;
        }

        /************ Process user-provided settings *************/ 

        var settings = {
            previewLen: 75,
            readMoreClass: 'read-more', 
            readLessClass: 'read-less',
            readMoreText: 'Read More >', 
            readLessText: '< Read Less', 
            ellipsis: true
        };

        // Any property can be overridden by adding a data attribute to the container
        for (var prop in settings) {
            if (userSettings && prop in userSettings) settings[prop] = userSettings[prop]; 
            if (typeof container.data(prop) !== 'undefined') settings[prop] = container.data(prop); 
        }

        /************ Initialization *************/ 

        var containerOrig, para1, para1Orig, bottomBuffer, readMore, readLess;

        function init() {
            readMore = $("<a href='javascript:undefined;'></a>").addClass(settings.readMoreClass), 
            readLess = $("<a href='javascript:undefined;'></a>").addClass(settings.readLessClass); 

            readMore.text(settings.readMoreText); 
            readLess.text(settings.readLessText); 

            // Store the original state of the container
            containerOrig = (function(o) {
                return {
                    height: o.height, 
                    top: o.top
                };
            })(container.offset()),

            // Store the original state of the container's first paragraph if it exists
            para1 = container.find('p').first();

            para1Orig = (function(para1, o) {
                return {
                    content: para1.html(), 
                    height: o.height, 
                    top: o.top
                };
            })(para1, para1.offset()); 

            // Shortened divs will be extended by the pixel equivalent of 1rem to make room for CSS borders.
            bottomBuffer = getFontSizeAsPixels($('h1'));
        }

        init(); 
        hide(); 

        /************ Public hide, show and text abbreviation methods *************/ 

        function show(){ 
            readMore.remove(); 

            // Show all elements after paragraph 1
            elementsAfterPara1().map(function(el) { $(el).show(); }); 

            // Restore height of container and its 1st paragraph
            para1.html( para1Orig.content ).removeClass('abbreviated'); 
            container.removeClass('abbreviated').css('height', containerOrig.height); 

            // Generate 'Read less' link 
            container.append(readLess); 
            readLess.click(function(){
                hide(); 
                scrollToEl(container);
            }); 
        }

        function abbreviate(text) {
            if (text.length <= settings.previewLen) return text; // Nothing to abbreviate
            text = text.substr(0, settings.previewLen); 
            if (settings.ellipsis === true) text+= '...';
            return text; 
        }

        function elementsAfterPara1() {
            var result = [], children = container.children(), start = children.index(para1) + 1; 
            if (!children[start]) return; // nothing to hide

            for (var i = start, l = children.length; i < l; i++)
                result.push(children[i]); 

            return result; 
        }

        function hide(){
            // Remove 'Read Less' if such a link is leftover from a previous request
            readLess.remove(); 

            // Get abbreviated text for first paragraph
            var abbrev = abbreviate(para1Orig.content);

            // abbreviate the first paragraph, shortening the text and appending an '...' if necessary
            para1.html(abbrev); 

            //Shorten the container so it's just tall enough to encompass paragraph 1
            var containerNewHeight = (para1Orig.top - containerOrig.top) + para1.offset().height;

            // Hide everything after the first paragraph
            elementsAfterPara1().map(function(el) { $(el).hide(); }); 

            // Setting overflow-y to hidden prevents the user from scrolling the abbreviated div
            container.addClass('abbreviated').css('height', containerNewHeight).css('overflow-y','hidden'); 

            // Prevent the user from scrolling internally through the DIV
            container.on('touchmove', function(e) {
                e.preventDefault();
            }); 

            //Generate a 'Read More' link and place it below the text
            para1.append(readMore); 
            readMore.on('tap click', show); 
        }
    };

Answer 1

我唯一能想到的就是那条线：readMore.on('tap click', show);

您确定'点击'（带空格）是正确的事件吗？

你为什么不坚持

readMore.click(function(){
            ... 
        });

你在show函数中使用过吗？

阅读更多/阅读更少功能失败

1 个答案: