3

例如，我有一个包含所有文本的 div，例如：

<div class="text-container">
<p>
Though we welcome the idea of a smaller connector, we're miffed that Apple couldn't just adopt the semi-industry standard of Micro-USB. That would make things easier for smartphone users across the globe. Yet, even so, the smaller connector may be a smart move for the future. The 30-pin connector has been around since 2003, long before the iPhone even existed: frankly, it's a dust magnet. A smaller connector helps shave extra space to achieve a smaller phone with perhaps a bigger battery. The new connector cable will mainly be used for syncing and charging by most people who own an Apple TV or Bluetooth/AirPlay accessories.
</p>
</div>

我想创建这样的东西：

<div class="text-container">
<p>
Though we welcome the idea of a smaller connector...<a href="some-javascript-to-show-more">[show more]</a>
</p>
</div>

我想我应该获取 div 的所有内容，然后找到第一个例如 50 个字符并在那里放置一个链接，所有其他文本都放在某个将被隐藏的 div 中，然后单击链接后显示其他内容.

它应该是类似切换的，如果它被展开，则将文本从 [显示更多] 更改为 [显示更少]，反之亦然。

任何建议如何使用纯 javascript 和 jquery 本身而不使用其他 jQuery 插件来实现这一点？

4

3 回答 3

2

这是另一个解决方案。

它不是简单地切掉中间的单词，而是检查结尾、标点和长词。

$(".text-container p").each(function() {
    var val = $.trim(this.innerHTML),
        parsed = val.split(/\s+/),
        cut = parsed;

    // for each word
    for (var i = 0, k = 0; i < parsed.length; i++) {
        k += parsed[i].length + 1;

        if (k - 1 > 50) {
            cut = parsed.slice(0, i);
            break;
        }
    }

    // if one long word
    if (cut.length == 0) {
        cut.push(parsed[0].substring(0, 50));
    }

    val = cut.join(" ");

    // if the text is long enough to cut
    if (cut.length != parsed.length) {
        this.innerHTML = val.replace(/[.,;?!]$/, "")
            + "<span>...</span> ";

        $("<span />")
            .css("display", "none")
            .html(parsed.slice(cut.length).join(" ") + " ")
            .appendTo(this);

        $("<a />", {
            href : "#",
            text : "[show more]"
        }).on("click", function(e) {
            var sh = this.innerHTML == "[show more]";
            $(this).prev("span").toggle(sh).prev("span").toggle(!sh);
            this.innerHTML = sh ? "[show less]" : "[show more]";
            e.preventDefault();
        }).appendTo(this);
    } else {
        this.innerHTML = val;
    }
});

演示：http: //jsfiddle.net/xRuch/

于 2012-09-18T11:02:31.043 回答
1

为您构建一个快速演示

jQuery

$(function(){
   var $el = $(".text-container").find("p");
   var str = $el.text();
   var str1 = str.substr(0,50), str2=  str.substr(51);
   $el.html(str1+" <span class='showMore'><a href='#'>Show more...</a></span><span class='moreText'>"+str2+"</span><span class='showLess'><a href='#'>Show Less</a></span>");

    $(".showMore").on("click", function(){
        $(this).next(".moreText").show();
        $(this).next(".moreText").next(".showLess").show();
        $(this).hide();
    });

     $(".showLess").on("click", function(){
        $(this).prev(".moreText").hide();
        $(this).prev(".moreText").prev(".showMore").show();
        $(this).hide();
    })

});

css

.moreText, .showLess { display:none};
于 2012-09-18T10:19:38.887 回答
0

在现代浏览器上，您可以使用 css 属性text-overflow:ellipsis;

http://jsfiddle.net/Y8skB/1/

show more我在我的示例中使用 css 来扩展文本，但如果你想要一个链接，你也可以使用 jquery 来做。

于 2012-09-18T09:57:23.197 回答