Question

我想实现readmore / less功能。即我将获得HTML内容，我将从该内容中显示前几个字符，并且会在其前面显示更多链接。我目前正在使用此代码：

    var txtToHide= input.substring(length);
    var textToShow= input.substring(0, length);
    var html = textToShow+ '<span class="readmore">&nbsp;&hellip;&nbsp;</span>' 
+ ('<span class="readmore">' + txtToHide+ '</span>');
    html = html + '<a id="read-more" title="More" href="#">More</a>';

上面的输入是输入字符串，长度是最初显示的字符串的长度。此代码存在问题，假设我想从此字符串中删除20个字符： "Hello <a href='#'>test</a> output"，html标签介于两者之间，如果将其部分剥离，它会弄乱页面。我想要的是，如果html标签介于范围之间，它应该覆盖整个标签，即我需要输出"Hello <a href='#'>test</a>"。我怎么能这样做

Answer 1

为什么不隐藏内容的隐藏部分而不是稍后添加？我通常只使用display: none隐藏内容，并在点击了更多内容时将其设置为display: block。

Answer 2

编辑：对不起，我没有读好这个问题。这应该工作：

<div id="test">
This <a href="http://www.google.com">links to google</a> 
<strong>and</strong> some random text to make it a little bit longer!
</div>

<script type="text/javascript"> 
$(document).ready(function() {
   var max_length = 21;
   var text_to_display = "";
   var index = 0;
   var full_contents = $("#test").contents();

   // loop through contents, stop after maxlength is reached
   $("#test").contents().each(function(i) {
        if ($(this).text().length + text_to_display.length < max_length) {
            text_to_display += $(this).text();
            index++;
        } else {
            return false;
        }
    });

   // second loop removes unwanted content
   $("#test").contents().each(function(i) {
        if (i > index) {
            $(this).remove();
        }
        return true;
   });

   // add link to show the full text
   $('<a href="#">read more...</a>').click(
    function(){
        $("#test").html($(full_contents));
        $(this).hide(); 
    }).insertAfter($("#test"));
 });
</script>

使用jQuery

可以很容易地完成

<div id="test">This <a href="http://www.google.com">is a link to google</a></div>

<script type="text/javascript"> 
$(document).ready(function() {
   alert($("#test").text());
 });
</script>

祝你好运！

Answer 3

你说html标签会成为一个问题，所以为什么不在字符串转换中删除并用纯文本替换，然后在Show More click，Toggle plain + Html

$(document).ready(function(){
    var Contents = $('#post p'); //Object

    var Plain = Contents.text(); //truncate this

    //Hide the texts to Contents
    Contents.hide();

    var PlainContainer = $("<div>").addClass("Plain_Container").val(Plain)

    //Add PlainContainer div after
    Contents.append(PlainContainer);


    var $('.show_hide').click(function(){
        $(Plain_Container).remove(); //Delete it

        Contents.Show(); //Show the orginal

        $(this).remove(); //Remove the link

        return false; //e.PreventDefault() :)
    });
});

这样使用text()函数会将html标记转换为值并删除标记本身，您只需要切换它们：）

注意：上述代码无法保证正常工作，仅作为示例提供。

阅读更多/更少，而无需在JavaScript中删除Html标记

3 个答案: