1

3 文字を超えるすべての文を減らしたいのですが、私のコードは最初の 3 文字を表示してから、「...」を追加します。これらの「...」をクリックすると、文全体が表示されます。しかし、すべての「...」をクリックすると、クリックした文そのものではなく、すべての文が表示されます。

私のコードは次のとおりです。

$('.test').each(function(){
    var el = $(this);
    var textOri = el.html();
    if(textOri.length > 3){
        el.html(textOri.substring(0,3)+'<span class="more">...</span>');
    }

    $(document).on('click', el.find('.more'), function() {
            el.html(textOri);
    });
});

ここに jsFiddle: http://jsfiddle.net/malamine_kebe/GxDsJ/

4

4 に答える 4

2

.on() 構文と、それを each ループに含めたことにいくつかの問題があります。代わりに、ユーザーがクリックしたときに後で使用できるように、元のテキストをどこかに保存する必要があります。

$('.test').each(function () {
    var el = $(this);
    var textOri = el.text();
    if (textOri.length > 3) {
        el.html(textOri.substring(0, 3) + '<span class="more" data-default='+textOri+'>...</span>');
    }

});

$(document).on('click', '.more', function () {
    $(this).parent().text($(this).data('default'));
});

固定フィドル

于 2013-07-25T12:49:53.163 に答える
2

クリック ハンドラーの構文は正しくありません。主にeachループ内にあるためですが、クリックされた要素にテキスト スワップを制限していないためです。これを試して：

$('.test').each(function(){
    var $el = $(this);
    var originalText = $el.html();
    if (originalText.length > 3) {
        $el.html(originalText.substring(0,3) + '<span class="more">...</span>');
    }
    $el.data('original-text', originalText);
});

$(document).on('click', '.more', function() {
    var $test = $(this).closest('.test')
    $test.html($test.data('original-text'));
});

更新されたフィドル

于 2013-07-25T12:50:01.160 に答える
0

ここに実用的なフィドルがあります：http://jsfiddle.net/GxDsJ/3/

次の変更を加えました。

  1. '.test' センテンスのデータに以前の html を保存します。

  2. 「.more」要素をクリックすると、「.test」要素である最も近い親を見つけます。この場合、parent() も問題なく機能します。

  3. 「.test」要素で、html をそのデータに格納されている hml に戻します。

注: ドキュメント全体ではなく、「.more」要素で共有されている最も近い祖先ノードでクリックをキャプチャしたい場合があります。これにより、パフォーマンスが向上します。

$('.test').each(function(){
var el = $(this);
var textOri = el.html();
if(textOri.length > 3){
    el.data('full-text', textOri);
    el.html(textOri.substring(0,3)+'<span class="more">...</span>');
}

$(document).on('click', '.more', function() {
    var $test = $(this).closest('.test');
    $test.html($test.data('full-text'));
});

});

于 2013-07-25T12:58:11.223 に答える
0

クリックして全文を表示したい。$(document) を $(el) に変更するだけです。

$(el).on('click', el.find('.more'), function() {
        el.html(textOri);
});
于 2013-07-25T13:01:48.413 に答える