Question

我有长段文字，js隐藏它，只显示前150个字母。点击“阅读更多”按钮后，它会显示其余内容。我的目标是改变＆＃34;阅读更多＆＃34;链接到类似的＆＃34;隐藏＆＃34;整个文本出现后按钮。

点击＆＃34;隐藏＆＃34;链接文字隐藏到150个字母和＆＃34;阅读更多＆＃34;按钮再次出现。

如何使用此代码执行此操作？

$('.review-item__text').each(function(event){ 
    var max_length = 150; 
    if($(this).html().length > max_length){ 
        var short_content = $(this).html().substr(0,max_length); 
        var long_content = $(this).html().substr(max_length);
        $(this).html(short_content+
            '<span>...</span>'+ 
            '<a href="#" class="read_more">Read more</a>'+
            '<span class="more_text" style="display:none;">'+long_content+'</span>'); 

        $(this).find('a.read_more').click(function(event){ 
            event.preventDefault(); 
            $(this).hide(); 
            $(this).parents('.review-item__text').find('.more_text').show(); 

        });

    }

});

Answer 1

检查此代码。

$('.review-item__text').each(function(event){ 
        var max_length = 150; 
        if($(this).html().length > max_length){ 
            var short_content = $(this).html().substr(0,max_length); 
            var long_content = $(this).html().substr(max_length);
            $(this).html(short_content+
                         '<span>...</span>'+    
                         '<a href="#" class="read_more">Read more</a>'+
                         '<span class="more_text" style="display:none;">'+long_content+'</span>'); 

            $(this).find('a.read_more').click(function(event){ 
                event.preventDefault(); 
        var more_text = $(this).parents('.review-item__text').find('.more_text');
        if(more_text.is(':visible')){
          $(this).html('Read More'); 
                $(this).parents('.review-item__text').find('.more_text').hide(); 
          $(this).appendTo($(this).parents('.review-item__text'));
        }else{

                $(this).html('Hide Extra'); 
                $(this).parents('.review-item__text').find('.more_text').show(); 
          $(this).appendTo($(this).parents('.review-item__text').find('.more_text'));
        }

            });

        }

    });

工作示例在这里 https://codepen.io/anon/pen/VMLddq?editors=1010

单击后需要隐藏文本

1 个答案: