2014-02-14 4 views
0

Попытка переключения между двумя изображениями при нажатии на заголовок. Для начала я даже не смог заставить их показать. Есть идеи?Установите css фонового изображения с jQuery

<h2 class="expand" id="content-1" style="cursor:pointer;" value="One">Click to expand One</h2> 
<h2 class="expand" id="content-2" style="cursor:pointer;" value="Two">Click to expand Two</h2> 

Пробовал ниже, но ничего пока.

$('.expand').on('click', function() { 
       if($(this).text().indexOf('expand') >0) 
       $(this).text('Click to collapse ' + $(this).attr("value")); 
       $('.expand').css('background-image', 'url(' + img/arrow-up.gif + ')'); 
       else 
        $(this).text('Click to expand ' + $(this).attr("value")); 
       $('.expand').css('background-image', 'url(' + img/down-up.gif + ')'); 
      }); 

и

$(this).text('Click to collapse ' + $(this).attr("value") + $(this).css...); 
+0

Ваше изображение css закомментировано. FYI, вы обычно обрабатываете это с помощью спрайта изображений, вместо этого вместо того, чтобы напрямую менять CSS, просто замените имя класса, которое будет перенаправлено спрайтом. –

+0

Теперь он раскоментирован, но вы пытаетесь добавить переменную с именем «img/arrow-up.gif». Это не сработает. Все должно быть всего лишь одна строка. –

+0

Синтаксис @Diodeus все еще может быть проблемой. '('+ img/arrow-up.gif +')' правильно? @DA исправлено – user3191137

ответ

1

Ваш самый простой вариант, чтобы переключить имена классов и определить изображения в CSS.

$('.expand').toggleClass('someClass') 


.someClass { 
    background-image:url(...); 
} 
0

Это:

$('.expand').css('background-image', 'url(' + img/arrow-up.gif + ')'); 

Вероятно, это должно быть:

$('.expand').css('background-image', 'url("img/arrow-up.gif")'); 

Но я бы второй Diaodeus и что это должно быть билд в CSS и ваш JQuery просто поменяв имена классов. Я бы также превратил ваши изображения в спрайт, так что это всего лишь одно изображение.

Смежные вопросы