div上的jQuery click事件

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