jQuery，.each() 问题

Question

我想减少每个超过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/

Answer 1

您为点击处理程序获得的语法不正确，主要是因为它位于 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'));
});

Updated fiddle