ここに示す対応するトグル スイッチ (画像) を使用して、div の単純なセットを作成しようとしています。
【質問】http://jsfiddle.net/hAJe2/9
HTML:
<div id="maindiv">
<div class="div1">div #1
</div>
<div class="div2">div #2
</div>
<div class="div3">div #3
</div>
<div class="div4">div #4
</div>
</div>
<div id="imagediv">
<img src="http://placehold.it/80x80/0066cc/ffffff" class="img-swap">
<img src="http://placehold.it/80x80/0066cc/ffffff" class="img-swap">
<img src="http://placehold.it/80x80/0066cc/ffffff" class="img-swap">
<img src="http://placehold.it/80x80/ffff33/000000" class="img-swap">
<img src="http://placehold.it/80x80/ffff33/000000" class="img-swap">
</div>
CSS:
#maindiv{margin:0 auto; text-align:center; font-family:arial, sans-serif;}
.div1{width:100px; height:50px; display:block; background:#33ff33; margin:10px auto; line-height:50px; display:inline-block;}
.div2{width:100px; height:50px; display:block; background:#33ff33; margin:10px auto; line-height:50px; display:inline-block;}
.div3{width:100px; height:50px; display:block; background:#ff3333; margin:10px auto; line-height:50px; display:inline-block;}
.div4{width:100px; height:50px; display:block; background:#ff3333; margin:10px auto; line-height:50px; display:inline-block;}
#imagediv{background:#cccccc;}
img{margin:10px; cursor:pointer;}
Jクエリ:
$(function(){
$(".img-swap").on('click', function() {
if ($(this).attr("class") == "img-swap") {
this.src = this.src.replace("0066cc","cccccc");
} else {
this.src = this.src.replace("cccccc","0066cc");
}
if ($(this).attr("class") == "img-swap") {
this.src = this.src.replace("ffff33","ccccc8");
} else {
this.src = this.src.replace("ccccc8","ffff33");
}
$(this).toggleClass();
});
});
できるようになりたいものです。デフォルトでは、Div#1、Div#2 は緑、Div#3、Div#4 は赤です。
1.青色の画像をクリックすると、Div の 1、2、3 が緑色になります。
2.黄色の画像をクリックすると、Divの1と4が緑色になります。
3.一度にクリックできるのは、(5 つのうちの) 1 つの画像のみです。したがって、青をクリックしてから黄色をクリックすると、黄色が上書きされ、Div の 1 と 4 が緑色になります。(上記の例のように、押された画像が灰色に変わることに注意してください。)
助けてくれてありがとう。