jquery - 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

您的 .on() 语法存在一些问题，并且您将其包含在每个循环中，或者您必须将原始文本保存在某处以便以后在用户单击时使用

$('.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'));
});

固定小提琴

Answer 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'));
});

更新的小提琴

Answer 3

这是一个工作小提琴：http: //jsfiddle.net/GxDsJ/3/

我做了以下更改：

1. 将以前的 html 存储在“.test”句子的数据中。

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'));
});

});

Answer 4

您想通过单击显示全文。只需将 $(document) 更改为 $(el)。

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