Javascript / jQuery .each и проблема синтаксиса

Question

У меня возникли проблемы с написанием функции для изменения фонового изображения в div в document.ready

Я не сделал jsfiddle, так как думаю, что проблема только в моих плохих (но улучшающихся) навыках jQuery. Пожалуйста, дайте мне знать, если вы считаете, что это необходимо.

Справочная информация -> У меня есть коллекция div с классом видимых портлетов или скрытых портлетов, каждый из этих div будет иметь другой класс красной стрелки (или другой цвет, но как только у меня будет один цвет, его будет легко экстраполировать). Когда страница загружается, мне нужна функция, которая может найти все div с классом portlet-hidden или portlet-visible и посмотреть, есть ли у них класс красной стрелки. Если это так, измените фоновое изображение src на другое значение.

Я действительно изо всех сил пытаюсь решить эту проблему, и любая помощь очень ценится.

Мой HTML

<div class="portlet-visible red-arrow"></div>

Мой CSS

div.portlet-visible
  {
    position:absolute;
    top:12px;
    right:10px;
    background-image:url(../images/red-arrow-up.png);
    width:14px;
    height:14px;    
  }

И, наконец, мой JavaScript

$(document).ready(function() {
        $(".portlet-hidden" && ".portlet-visible").each(function()  {
            if ($("this").hasClass(".red-arrow")) {
                $(this).css(background-image, url('"url(../images/blue-arrow-up.png)"')
            };
        });

    });     

Answer 1

Несколько селекторов должны быть разделены запятой (,), а также метод css принимает строку или карту.Попробуйте это.

$(document).ready(function() {
        $(".portlet-hidden, .portlet-visible").each(function()  {
            if ($(this).hasClass("red-arrow")) {
                $(this).css('background-image', "url('../images/blue-arrow-up.png')")
            };
        });

    });   

Answer 2

Я бы написал селектор таким образом

 $(".portlet-hidden, .portlet-visible")

Answer 3

Во-первых ... Ответ Арчера точен: то, что вы пытаетесь сделать с помощью jQuery, можно сделать только с помощью CSS.

Но если по какой-то причине вам нужен jQuery, некоторые вещиздесь не так.

Во-первых, как сказал justtkt в своем ответе, ваш селектор ошибочен.Нет необходимости (и синтаксически неправильно ) использовать условные операторы, такие как && или ||в селекторе jQuery.Это просто потому, что уже условный синтаксис встроен в для CSS, на котором непосредственно основаны селекторы jQuery.

.this-class.that-class

Выбирает все элементы с помощью и .this-class, и .that-class.

#this-id.that-class

Это очень (возможно, слишком) конкретное объявление, которое выбирает элемент (на странице должен быть только один идентификатор) с обоими # this-id и .that-class

Чтобы узнать больше о селекторах, прочитайте эту очень полную, полную и обучающую ссылку http://www.w3.org/TR/selectors/

Дополнительно и важно

Эта строка:

$("this").hasClass(".red-arrow")

Неверно!hasClass не требует селектора ("."), потому что он занимает класс .Это должно быть

  $("this").hasClass("red-arrow")

Также !!

 $(this).css(background-image, url('"url(../images/blue-arrow-up.png)"')

В этой строке есть некоторые ошибки ... должно быть:

 $(this).css("background-image", "url(../images/blue-arrow-up.png)")

хотя я думаю, что следующий синтаксис проще:

css({'background-image' : 'url(../images/blue-arrow-up.png)'})

Answer 4

Если нет конкретной причины, по которой вы хотите сделать это с помощью jQuery, вам следует просто использовать CSS ...

div.portlet-visible
{
    background-image:url(../images/red-arrow-up.png);
    width:14px;
    height:14px;    
}
div.portlet-visible.red-arrow
{
    background-image:url(../images/blue-arrow-up.png);
}

Любой div с классом «portlet-visible» определен в первом блоке, а любой div с классами «portlet-visible» и «red-arrow» будет использовать тот же css, но также примените новое фоновое изображение.

http://jsfiddle.net/johncmolyneux/gcm5b/

Answer 5

1. изменение в селекторе ".portlet-hidden,.portlet-visible"
2. изменить, если условие boolean из строки

3. изменение css.

   $(".portlet-hidden,.portlet-visible").each(function(){
      if ($("this").hasClass("red-arrow")){
        $(this).css("background-image", "url('../images/blue-arrow-up.png')");
     }
   });
   

Answer 6

if ('$("this").hasClass(".red-arrow")') { <--- это условие здесь строка </p>

Должно быть:

if ($(this).hasClass(".red-arrow")) {

Answer 7

Вместо && двух селекторов вместе, используйте метод множественный селектор , как $(".portlet-hidden, .portlet-visible") или .add () , для создания вашего jQuery.

Ваша текущая строка фактически объединяет две строки, и я верю, что в Javascript будет возвращено логическое значение true.

Answer 8

Ваш селектор просто неверен. Если вы хотите сопоставить вещи с обоими классами, это будет:

$('.portlet-hidden.portlet-visible').each( ...

Если вы хотите сопоставить либо классов:

$('.portlet-hidden, .portlet-visible').each( ...

Выражение ".portlet-hidden" && ".portlet-visible" всегда будет иметь значение ".portlet-visible".