Question

我有这段代码：

<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更改bacground颜色但是当我第二次点击相同的图标时，我无法改变div背景......

演示www.pluspon.com/kategorije.html

Answer 1

为什么要在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);
}

在div上的Jquery点击事件

1 个答案: