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

У меня возникли проблемы с написанием функции для изменения фонового изображения в 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)"')
            };
        });

    });

Undefined 18.01.2012 источник

comment

Пожалуйста, дайте мне знать, если я могу дать дополнительную информацию. Спасибо - Undefined 18.01.2012

comment

Почему эта строка кода является строкой: if ('$("this").hasClass(".red-arrow")') {. Должно быть так: if ($("this").hasClass(".red-arrow")) {. - jfriend00 18.01.2012

comment

Я изменил это в javascript - Undefined 18.01.2012

comment

Как вы думаете, что делает ".portlet-hidden" && ".portlet-visible"? У вас определена функция url? Похоже, вы хотите, чтобы .css('background-image', "url(../images/blue-arrow-up.png)"), background-image не было допустимым именем переменной. - Felix Kling 18.01.2012

Ответы (8)

arrow_upward
3
arrow_downward

Несколько селекторов должны быть разделены запятой (,), а также метод 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')")
            };
        });

    });

ShankarSangoli 18.01.2012

comment

в этом коде все еще есть ошибки. см. мой ответ ... также классы, разделенные запятыми, представляют собой условие ИЛИ, а не условие И. - HandiworkNYC.com; 18.01.2012

comment

@ j-man86 - OP нуждается в условии ИЛИ, только прочитайте вопрос еще раз, не следуйте коду OP, в нем много беспорядка. - ShankarSangoli; 18.01.2012

comment

$(this).hasClass(.red-arrow) — ошибка. Рядом с «красной стрелкой» не должно быть селектора класса. hasClass() принимает только класс. - HandiworkNYC.com; 18.01.2012

arrow_upward
2
arrow_downward

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

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

Kristian 18.01.2012

comment

вы заметили 1 из 3 крупных сбоев - jAndy; 18.01.2012

arrow_upward
1
arrow_downward

Если нет конкретной причины, по которой вы хотите сделать это с помощью 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» и «красная стрелка» будет использовать тот же css, но также применять новое фоновое изображение.

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

Reinstate Monica Cellio 18.01.2012

arrow_upward
1
arrow_downward

Во-первых... Ответ Арчера точен: то, что вы пытаетесь сделать с помощью 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)'})

HandiworkNYC.com 18.01.2012

arrow_upward
0
arrow_downward

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

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

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

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

Выражение ".portlet-hidden" && ".portlet-visible" всегда будет оцениваться как ".portlet-visible".

Pointy 18.01.2012

arrow_upward
0
arrow_downward

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

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

justkt 18.01.2012

arrow_upward
0
arrow_downward

if ('$("this").hasClass(".red-arrow")') { ‹--- здесь это условие является строкой

Должно быть:

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

Diodeus - James MacFarlane 18.01.2012

arrow_upward
0
arrow_downward

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

изменение в css.

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

dku.rajkumar 18.01.2012

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

Ответы (8)

Похожие вопросы