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

FIXED FIDDLE

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

Updated fiddle

Answer 3

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

我做了以下更改：

将先前的html存储在'.test'句子的数据中。
点击'.more'元素，找到它最接近的父项'.test'元素。在这种情况下，parent（）也可以正常工作。
在'.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

您想通过点击它来显示全文。只需将$（文件）更改为$（el）。

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

jQuery，问题.each（）

4 个答案: