Запустить функцию JavaScript на нескольких элементах ..? - PullRequest
Новая
       7

Запустить функцию JavaScript на нескольких элементах ..?

1 голос
/ 10 апреля 2011

Я очень плохо знаком с JavaScript (и, конечно, с jQuery), поэтому мне нужна небольшая помощь ... Эта функция JavaScript изменяет размер шрифта в зависимости от div контейнера.

http://jsfiddle.net/pthjU/

Мне нужно, чтобы он работал для всех div-ов (определенного класса, в конце концов) - но он берет только информацию из первого и изменяет размеры всех в соответствии с этим.Есть какие-нибудь мысли?

Не ищите ответ "копировать / вставить", я хочу пройти через это правильно.Спасибо!

Ответы [ 2 ]

1 голос
/ 10 апреля 2011

Поскольку вы хотите обрабатывать каждый элемент независимо, вы можете сделать это в своем плагине, выполнив цикл .each() вместо этого: 

$.fn.textfill = function(options) {
    var fontSize = options.maxFontPixels;
    var ourText = $('span', this);
    var maxHeight = $(this).height();
    var maxWidth = $(this).width();
    var textHeight;
    var textWidth;
    do {
        ourText.css('font-size', fontSize);
        textHeight = ourText.height();
        textWidth = ourText.width();
        fontSize = fontSize - 1;
    } while (textHeight > maxHeight || textWidth > maxWidth && fontSize > 3);
    return this;
}

быть таким: 

$.fn.textfill = function(options) {
    return this.each(function() {
        var fontSize = options.maxFontPixels;
        var ourText = $('span', this);
        var maxHeight = $(this).height();
        var maxWidth = $(this).width();
        var textHeight;
        var textWidth;
        do {
            ourText.css('font-size', fontSize);
            textHeight = ourText.height();
            textWidth = ourText.width();
            fontSize = fontSize - 1;
        } while (textHeight > maxHeight || textWidth > maxWidth && fontSize > 3);
    });
};

Вы можете проверить это здесь

В качестве отступления от старого метода ... this ужеОбъект jQuery внутри плагина (обратите внимание, как я вызываю .each() непосредственно на нем), нет необходимости заключать его в другой объект jQuery (клонировать его).Вам do нужно обернуть его во втором примере внутри цикла, поскольку внутри .each() вы имеете в виду отдельные элементы DOM, а не объекты jQuery.

0 голосов
/ 10 апреля 2011

добавить .each () в 

$('.post').each().textfill({ maxFontPixels: 500 }); <--- not sure if this works.. but

$('.post').each(function(){
    jQuery(this).textfill({ maxFontPixels: 500 });
});

Должно определенно работать.

Alan

...