11

jQuery dotdotdotプラグインを使用して、表示するテキストが多い場合にコンテンツ全体を表示および非表示にするための [ More ] ボタンと[ Less ] ボタンの両方を使用したいと考えています。<div>[その他] ボタンは正常に機能していますが、元の表示に戻す方法はまだわかりません<div>。これは、dotdotdot を使用して切り詰められた文字列を拡張する方法だけではないことに注意してください。これには、長い文字列を再切り詰める Less ボタンが組み込まれているためです。

これが私のコードです:

$(function() {
    $("div.ellipsis-text").dotdotdot({
        after: 'a.more',
        callback: dotdotdotCallback
    });
    $("div.ellipsis-text").find("a").click(function() {
        if ($(this).text() == "More") {
            var div = $(this).closest('div.ellipsis-text');
            div.trigger('destroy').find('a.more').hide();
            div.css('max-height', '');
            $("a.less", div).show();
        }
        else {
            $(this).text("More");
            $(this).closest('div.ellipsis-text').css("max-height", "50px").dotdotdot({ after: "a", callback: dotdotdotCallback });
        }
    });

    function dotdotdotCallback(isTruncated, originalContent) {
        if (!isTruncated) {
         $("a", this).remove();   
        }
    }
});

のアンカー タグのclickイベント ハンドラー<div>が削除されているようです。[その他] ボタンをクリックした後、イベント ハンドラーにアクセスできません。

見つかった解決策:

更新されたコード:

$(function() {
    $("div.ellipsis-text").dotdotdot({
        after: 'a.more',
        callback: dotdotdotCallback
    });
    $("div.ellipsis-text").on('click','a',function() {
        if ($(this).text() == "More") {
            var div = $(this).closest('div.ellipsis-text');
            div.trigger('destroy').find('a.more').hide();
            div.css('max-height', '');
            $("a.less", div).show();
        }
        else {
            $(this).hide();
            $(this).closest('div.ellipsis-text').css("max-height", "50px").dotdotdot({ after: "a.more", callback: dotdotdotCallback });
        }
    });

    function dotdotdotCallback(isTruncated, originalContent) {
        if (!isTruncated) {
         $("a", this).remove();   
        }
    }
});

みんなありがとう！

4

3 に答える 3

10

これを変える：

$("div.ellipsis-text").find("a").click(function() {

これに：

$("div.ellipsis-text").on('click','a',function() {

更新されたコード:

$(function () {
    $("div.ellipsis-text").dotdotdot({
        after: 'a.more',
        callback: dotdotdotCallback
    });
    $("div.ellipsis-text").on('click', 'a', function () {

        if ($(this).text() == "More") {
            var div = $(this).closest('div.ellipsis-text');
            div.trigger('destroy').find('a.more').hide();
            div.css('max-height', '');
            $("a.less", div).show();
        } else {

            $(this).closest('div.ellipsis-text').css("max-height", "50px").dotdotdot({
                after: "a",
                callback: dotdotdotCallback
            });
        }
    });

    function dotdotdotCallback(isTruncated, originalContent) {
        if (!isTruncated) {
            $("a", this).remove();
        }
    }
});

2 番目の方法は、単一のタグを使用して、そのテキストを次のように切り替えることです。

HTML:

    <div class='ellipsis-text'>"But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure?" 

<a class='more' href='#'>More</a>

 </div>

Jクエリ:

$(function () {
    $("div.ellipsis-text").dotdotdot({
        after: 'a.more',
        callback: dotdotdotCallback
    });
    $("div.ellipsis-text").on('click', 'a', function () {

        if ($(this).text() == "More") {
            var div = $(this).closest('div.ellipsis-text');
            div.trigger('destroy')
            div.css('max-height', '');
            $(this).text("Less");

        } else {
            $(this).text("More")
            $(this).closest('div.ellipsis-text').css("max-height", "50px").dotdotdot({
                after: "a",
                callback: dotdotdotCallback
            });
        }
    });

    function dotdotdotCallback(isTruncated, originalContent) {
        if (!isTruncated) {
            $("a", this).remove();
        }
    }
});
于 2014-08-07T16:51:47.787 に答える