условно в зависимости от стиля

0

Я пытаюсь получить условный оператор для работы, который работает только в том случае, если определенные элементы имеют определенный встроенный стиль css.

http://jsfiddle.net/zGg7Z/ HTML

<div>
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
</div>

JS

$(function(){

    if ( $('.box').filter( function(){
        return $(this).css('opacity') !== "0.4";
    }) )  {
        $('.box').on('click', function(){
            $(this).siblings('.box').css("opacity", "0.4")
        });
    }

})

Поэтому, когда нажимается ящик, его братья и сестры исчезают до opacity: 0.4; , но я не хочу, чтобы функция fade запускалась снова, если у любого из полей есть эта непрозрачность. Благодарю.

  • 3
    Это похоже на довольно закулисный подход к вашему приложению, и это связывает функцию со стилем. Существует почти наверняка лучший способ. Как насчет добавления класса, когда вы исчезаете?
  • 0
    Да, как упоминалось выше, возможно, было бы лучше использовать .addClass (className) и .removeClass ([className]). Вы можете проверить класс с помощью .hasClass (className), а затем добавить или удалить класс исчезновения по мере необходимости.
Показать ещё 1 комментарий
Теги:

3 ответа

1

Я согласен с ответом на использование класса. Однако, чтобы объяснить, почему ваш не будет работать... Ваш if всегда будет оценивать true, поскольку filter (даже если пустой) всегда возвращает объект jquery. Объекты "правдивые". Вместо этого вам понадобится .length чтобы проверить, не вернулся ли фильтр. Кроме того, ваше условие фильтра обратное, так как вы хотите убедиться, что ни один из элементов не имеет этой непрозрачности, вместо этого вы проверяете, что у какого-либо элемента нет непрозрачности. Также ваши номера не соответствуют 0.4 и 0.3 и, наконец, ваш, если находится за пределами вашего клика и должен быть внутри.

Используя ваш подход и только исправляя ошибки, у вас будет что-то вроде этого:

http://jsfiddle.net/zGg7Z/1/

$('.box').on('click', function(){
    if($('.box').filter( function(){
        return $(this).css('opacity') === "0.4";
    }).length === 0 )  {

        $(this).siblings('.box').css("opacity", "0.4")

    }
});

Опять же, не используйте это решение, идите с одним из других ответов, используя класс. Я просто подумал, что стоит объяснить, что не так с вашим кодом.

  • 0
    Спасибо за объяснение, тогда я просто пойду с методом класса.
1

Хотя вполне возможно создать пользовательский фильтр с jquery и проверить непрозрачность css-свойства в нем, я бы настоятельно рекомендовал изменить ваш дизайн и сказать создать новый класс css, например

 .glass { 
    opacity: 0.4;
 }

И примените этот класс вместо встроенного свойства или вместе с ним.

тогда

selector.filter('.glass')

для фильтрации подмножества элементов из всех элементов, которые у вас есть.

В противном случае используйте фильтр с функцией:

 $( "div" ).filter(function( index ) {
     return $( this ).css('opacity') == "0.4";
 })
0

Как правило, добавление обработчиков событий в условных выражениях не является тем, что вы хотите. Вместо этого всегда связывайте обработчики, затем проверяйте условие внутри обработчика. В этом случае, однако, я не думаю, что вам действительно нужно условное вообще. Я думаю, вы ищете что-то вроде этого:

http://jsfiddle.net/tHUwK/

$('.box').on('click', function() {
    $(this).removeClass('faded').siblings('.box').addClass('faded');
});

Ещё вопросы

Сообщество Overcoder
Наверх
Меню