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変更bacgroundの色をクリックしますが、私は同じアイコンをもう一度クリックしたときに、私はdivの背景を変更傾けるとき... 。

デモwww.pluspon.com/kategorije.html

出典

2012-02-13 Miki Cloud

交換が動作しているようです火かき棒で変わる'：hover'スタイルがあなたを混乱させないと確信していますか？ – paislee

問題を整理したように思えます。理由を整理したように、 'onclick'リスナーを2回追加しました。いずれかのdivがクリックされると、最初のリスナーが背景を変更し、もう一方のリスナーが背景を変更しました。 – Feysal

なぜあなたはJavaScriptでこの機能を持つようにしたいですか？他のオプションは、プロセスを簡素化するためにCSSクラスを使用することです：

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

CSS：http://jsfiddle.net/FxFhv/ ..ファイルを表示：

.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は属性です。 2つの異なること。 –

あなたのコメントありがとう – Richard

jQueryの私はこのコードを持っているdiv要素

答えて

関連する問題