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

查询：

$(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.在任何给定时间只能点击一张图片（五张中的一张）。因此，如果我单击蓝色，然后单击黄色，黄色将被覆盖，因此 Div 的 1 和 4 将变为绿色。（请注意，按下的图像将变为灰色，如上例所示。）

提前感谢您的帮助。

4

1 回答 1

1

查看更新的小提琴

我清理了你的 CSS 代码。添加了用于处理事件的数据属性。这是带有注释的javascript代码

$(function(){
  // declare current var for later use
  var current;
  // if an element with the class img-swap is clicked
  $(".img-swap").on('click', function() {
     // set this image to grey (dont know if this is the right img url, but seems so)
     $(this).attr('src', 'http://placehold.it/80x80');
     // remember if we need to do swap1 (green, green, green, red) or swap 2 (green, red, red, green)
     current = $(this).hasClass('swap1') ? 'swap1' : 'swap2'; 
     // iterate over all our divs
     $('#maindiv div').each(function() {
        // remove the current classes (green AND red)
        $(this).removeClass('red green')
        // get the class from the data-attribute (data-swap1 or data-swap2) and add this class
        $(this).addClass($(this).data(current));   
     }); 
  });
});

编辑：你可能不应该对类名使用“绿色”和“红色”，我只是为了说明而这样做

edit2：如果您希望只允许单击一次 img-swap，只需在单击处理程序中首先检查 img-src：查看小提琴的另一个更新：http: //jsfiddle.net/hAJe2/ 27/

于 2012-11-28T08:48:28.137 回答