Jquery click событие на div - PullRequest
Новая
       1

Jquery click событие на div

2 голосов
/ 14 февраля 2012

У меня есть этот код: 

<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, меняю цвет фона, но когда я нажимаю второй раз на тот же значок, я не могу изменить фон div ...

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

1 Ответ

4 голосов
/ 14 февраля 2012

Почему вы хотите иметь эту функцию в 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);
}
...