0

ここに示す対応するトグル スイッチ (画像) を使用して、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 が緑色になります。(上記の例のように、押された画像が灰色に変わることに注意してください。)

助けてくれてありがとう。

4

1 に答える 1