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に配置して非表示にし、リンクをクリックすると他のものが表示されるはずです.

これはトグルのようで、展開されている場合はテキストを [show more] から [show less] に変更し、その逆にする必要があります。

プレーンな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/

私の例ではcssを使用してテキストを展開しましたが、show moreリンクが必要な場合はjqueryを使用して展開することもできます。

于 2012-09-18T09:57:23.197 に答える