jQuery，与.each（）一起发布_Jquery_Each

jQuery，与.each（）一起发布

jquery

jQuery，与.each（）一起发布,jquery,each,Jquery,Each,我想减少每一个超过3个字母的句子，我的代码显示前3个字母，然后它添加…，通过点击这些。。。我想展示整个句子。但当我点击每一个。。。它显示了每个句子，而不是我点击的句子我的代码是： $('.test').each(function(){ var el = $(this); var textOri = el.html(); if(textOri.length > 3){ el.html(textOri.substring(0,3)+'<span

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

在语法和语法方面存在一些问题，您必须将其包含在每个循环中，或者您必须将原始文本保存在某个地方，以便稍后用户单击时使用

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

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

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

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

这是一把小提琴：

我做了以下修改：

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

单击“.more”元素，查找其最近的父元素“.test”元素。在这种情况下，家长也可以正常工作

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

})