div上的jQuery click事件

Question

I have this code: 我有以下代码：

<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>

I have a problem - when I click once div change bacground color but when I click second time on same icon then I cant change div background... 我有一个问题-当我单击一次div更改bacground颜色，但是当我第二次单击同一图标时，则无法更改div背景...

demo www.pluspon.com/kategorije.html 演示www.pluspon.com/kategorije.html

Answer 1

Why do you want to have this functionality in JavaScript? 为什么要在JavaScript中具有此功能？ An other option would be to use CSS classes to simplify the process: 另一种选择是使用CSS类来简化过程：

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

CSS: CSS：

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

div上的jQuery click事件

问题描述

1 个解决方案

解决方案1
4 已采纳 2012-02-13 20:12:57

div上的jQuery click事件

问题描述

1 个解决方案

解决方案1 4 已采纳 2012-02-13 20:12:57

解决方案1
4 已采纳 2012-02-13 20:12:57