Jquery нажмите на событии DIV

У меня есть этот код:Jquery нажмите на событии DIV

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
<style type="text/css"> 
.kat1 { 
    background-image:url(ikoniceKategorije/07.jpg); 
    width:30px; 
    height:30px; 
    float:left; 
    } 
.kat1:hover { 
    background-image:url(ikoniceKategorije/07h.jpg); 
    } 

// here I have a code for .kat2,kat2 ... styles 
#div { 
    width:220px; 
    height:30px; 
    overflow:hidden; 
    } 

</style> 
<script> 
$(function() { 
    $('#div div').click(function() { 
    var elem = $(this); 
    var style = elem.css('background-image'); 
    if(/h\.jpg/.test(style)) { 
     elem.css('background-image', style.replace(/h\.jpg/, '.jpg')); 
    } else { 
     elem.css('background-image', style.replace(/\.jpg/, 'h.jpg')); 
    } 
    }); 
}); 
</script> 
</head> 

<body> 

    <div id="div"> 
     <div class="kat1 changing"></div> 
     <div class="kat2 changing"></div> 
     <div class="kat3 changing"></div> 
     <div class="kat4 changing"></div> 
     <div class="kat5 changing"></div> 
     <div class="kat6 changing"></div> 
     <div class="kat7 changing"></div> 
    </div> 
</body> 
</html>

У меня есть проблема - когда я нажимаю один раз изменить деление с цветом задним, но когда я нажимаю второй раз на тот же значок, то я не могу изменить Div фон .. .

демо www.pluspon.com/kategorije.html

источник

2012-02-13 Miki Cloud

Замена кажется, работает: http://jsfiddle.net/FxFhv/ .. посмотреть файл изменение в firebug. Вы уверены, что стиль ': hover' вас не смущает? – paislee

Кажется, вы разобрались в проблеме, так же, как я выяснил причину: вы дважды добавили слушателя 'onclick'. Когда был нажат любой div, первый слушатель изменил фон, а другой изменил его. – Feysal

Почему вы хотите иметь эту функцию в JavaScript? Другим вариантом было бы использовать классы CSS для упрощения процесса:

$(function() { 
    $('#div div').click(function() { 
    $(this).toggleClass('active'); 
    }); 
});

CSS:

.kat1 { 
    background-image:url(ikoniceKategorije/07.jpg); 
    width:30px; 
    height:30px; 
    float:left; 
} 
.kat1:hover, 
.kat1.active { 
    background-image:url(ikoniceKategorije/07h.jpg); 
}

источник

2012-02-13 20:12:57 Richard

Ваша функция переключает класс CSS, а CSS: active - это атрибут. Две разные вещи. –

Спасибо за ваш комментарий – Richard

Jquery нажмите на событии DIV

ответ

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