jQuery, issue with .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

Answer 2

Есть некоторые проблемы с вашим .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 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); 
});