2012-04-06 3 views
0

У меня есть много div с тем же фоновым изображением, и я хочу изменить этот фон, когда я нажимаю на один из них.jQuery - сменить картинку при щелчке мышью для многих div's

Я тренируюсь с некоторыми, как это:

тело:

<div id="basket-plusminus"></div> 
... 
<div id="basket-plusminus"></div> 

<script> 
$("#basket-plusminus").toggle(
function() { 
$(this).addClass("click-plusminus"); 
}, 
function() { 
$(this).removeClass("click-plusminus"); 
} 
); 
</script> 

в CSS:

#basket-plusminus { 
width:11px; 
height:11px; 
background:url(../img/icons/plus-min.png) no-repeat scroll 0 0 transparent; 
cursor:pointer; 
} 

.click-plusminus { 
background-image:url(../img/icons/minus-min.png) !important; 
} 

я не знаю, как добавить авто идентификаторов в что, возможно, это разрешение.

помощь

+2

У вас есть несколько элементов с одним и тем же «id», это неверно. «Id» *** должен быть уникальным в документе. –

ответ

1

С небольшой доработкой разметки и Javascript вы могли бы сделать это: http://jsfiddle.net/Wrxdy/ конечно держать фон у вас есть - я просто переключая цвета, например.

+0

спасибо! лучшее решение! –

0

Используйте класс istead тега id, так как идентификаторы уникальны.

Try:.

<div class="basket-plusminus"></div> 
... 
<div class="basket-plusminus"></div> 

<script> 
$(".basket-plusminus").toggle(
    function() 
    { 
     $(this).addClass("click-plusminus"); 
    }, 
    function() 
    { 
     $(this).removeClass("click-plusminus"); 
    } 
); 
</script> 
0

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

$ (документ) .ready (функция() {

$ ("# backet-plusminus"). Click (function() {$ ('myOjbect'). Css ('background-image', 'url (' + imageUrl + ')');});

})

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