Создание условного оператора, который применяет правила на основе количества символов - PullRequest
Новая
       15

Создание условного оператора, который применяет правила на основе количества символов

0 голосов
/ 21 января 2012

Я застрял в ситуации, когда у меня есть контейнер с единственной строкой текста, идеально отцентрированной. Иногда текст длиннее и разбивается на вторую строку. Это отбрасывает макет, поэтому мне нужно решение. Я подумываю об использовании jquery, чтобы сказать: «Если количество символов превышает 28 символов, тогда примените отступ по вертикали -10px для центрирования текста».

Как бы вы поступили с этим в jquery? То есть создание условного оператора, который применяет правила, основанные на количестве символов? Вот мой html, класс span redstrip требует отступа -10, если количество символов превышает 28 символов: 

<a href="#">
    <img src="images/dummy3.jpg" alt="dummy">
    <span class="redStrip">Here is a bunch of dummy text that is a bit too long</span>
</a>

Ответы [ 2 ]

2 голосов
/ 21 января 2012

Хотя ответ Энтони точен, он будет работать только для единичных элементов из-за поведения .text() на упакованных множествах jQuery с несколькими элементами. (т. е. если .redstrip выбрано более одного элемента DOM, простое if не обрежет его).

Расширяя его ответ, вы можете применить фильтр обратного вызова или .each(). 

// via filter
var redStrip = $('.redStrip');
redStrip
    .filter(function () { return $(this).text().length > 28 })
    .css('margin-top','-10px')
    ;

// via .each()
var redStrip = $('.redStrip');
redStrip.each(function () {
    var $t = $(this);
    if ($t.text().length > 28) {
        $t.css('margin-top','-10px');
    }
});
1 голос
/ 21 января 2012

Является ли содержимое постоянным после загрузки страницы или оно обновляется в результате взаимодействия пользователя со страницей?Предполагая первое, вы можете просто сделать это: 

var redStrip = $('.redStrip');
if(redStrip.text().length > 28) {
    redStrip.css('margin-top', '-10px');
}

Если вы динамически обновляете содержимое redStrip, вы всегда можете обернуть вышеуказанный код в функцию, а также вызывать ее каждый раз, когда вы делаете.

РЕДАКТИРОВАТЬ : сделать это '-10px' в вызове .css().

...