Многократно используемая функция усечения jQuery

Итак, я создал следующий код для обработки одного экземпляра строки, которая требует обрезания с расширяемыми и суммируемыми событиями щелчка.Многократно используемая функция усечения jQuery

$(document).ready(function() { 
    var Element = $("[class*='truncate']"); 
    var FullText = $(".truncate").text(); 
    var Show = "<span class='show'> [...]</span>"; 
    var Hide = "<span class='hide'> [ ]</span>"; 
    var shortString = FullText.substring(0, 5); 

    if (FullText.length > 5) { 
     $(Element).html(shortString + Show); 
    } 

    $(Element).on("click", ".show", function() { 
     $(Element).html(FullText + Hide); 
    }); 

    $(Element).on("click", ".hide", function() { 
     $(Element).html(shortString + Show); 
    });  
});

Какие обрезает следующих HTML

<div class="truncate">MBK-40B-FRLBBLCSLWLHBLHSLSALSAS32PDL</div>

Приведенный выше код работает отлично для одного экземпляра класса .truncate, но при добавлении больше вещей получить немного грязный. Как я могу заставить этот код работать, когда есть много элементов с этим классом, некоторые из которых должны быть усечены, а другие - нет?

источник

2013-12-11 Rich

Вопросы, предлагающие нам рекомендовать или находить инструмент, библиотеку или любимый ресурс вне сайта, не относятся к теме для переполнения стека, поскольку они, как правило, привлекают упрямые ответы и спам. Вместо этого опишите проблему и то, что было сделано до сих пор, чтобы ее решить. – Rooster

@Rooster Я не просил кого-либо рекомендовать библиотеку, инструмент и т. Д., Вы можете перечитать мой пост? – Rich

@KevinB Wowa Я четко просил указателей, а не целого решения. – Rich

Мы можем узнать о методе .each() JQuery, вот некоторые документы: http://api.jquery.com/each/

.each() будет пройти через каждый элемент, который был найден с селектором и дать доступ к нему через this ключевого слова, что позволяет запускать ваш код для одного элемента за раз.

$(document).ready(function() { 
    var Show = "<span class='show'> [...]</span>"; 
    var Hide = "<span class='hide'> [ ]</span>"; 

    $(".truncate").each(function(){ 
    var Element = this; 
    var FullText = $(Element).text(); 
    var shortString = FullText.substring(0, 5); 
    if (FullText.length > 5) { 
     $(Element).html(shortString + Show); 
    } 

    $(Element).on("click", ".show", function() { 
     $(Element).html(FullText + Hide); 
    }); 

    $(Element).on("click", ".hide", function() { 
     $(Element).html(shortString + Show); 
    }); 
    }); 
});

Есть лучшие способы сделать это, но .each() быстро исправить. То, что меня беспокоит, отключит всех этих слушателей, я не уверен, что вы делаете с вашим кодом позже, но вы не хотите проблем с памятью. Какие-либо предложения?

источник

2013-12-11 22:00:49 RustyToms

С этим кодом больше ничего не делается, это просто для усечения строк и расширения/сглаживания у пользователей. Не могли бы вы объяснить возможные проблемы с памятью? – Rich

Я использую Backbone.js, и это проблема, потому что вы никогда не обновляете страницу. Если вы делаете прослушиватели событий для элементов html, замените эти элементы на другие элементы, первые элементы не будут удалены из памяти, потому что они связаны с прослушивателями событий. В вашем случае, если вы устанавливаете это один раз, тогда, когда пользователь переводит страницу, обновляется, я думаю, это не имеет большого значения. Но FYI, чтобы удалить '.on()' вы используете '.off()', [документы находятся здесь] (http://api.jquery.com/off/) – RustyToms

Большое спасибо за вашу помощь и код. (Ваш пример пропускает конец}); btw) Также при использовании этого происходит сбой функции разваливания. У меня было это, когда я экспериментировал с этим ключевым словом раньше. – Rich

https://jsfiddle.net/5dtmm9kn/

JS

   $('[truncate]').each(function(index) { 
       var howmuch = $(this).attr('truncate'); 
       var title = $(this).text(); 
       var shortText = jQuery.trim(title).substring(0, howmuch) 
        .split(" ").slice(0, -1).join(" ") + " <span>...</span>"; 
       $(this).html(shortText); 
       });

html

<h3 truncate="40">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h3>

css

[truncate] span{ 
    font-size: 0.6em; 
    opacity: 0.6; 
    }

источник

2016-10-06 22:28:25 Omar

Многократно используемая функция усечения jQuery

ответ

Смежные вопросы