Question

我正在尝试构建一组简单的div，并带有此处显示的相应切换开关（图像）;

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

JQUERY：

$(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将为绿色。（注意按下的图像将变为灰色，如上例所示。）

提前感谢您的帮助。

Answer 1

请参阅更新的fiddle

我清理了你的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));   
     }); 
  });
});

编辑：你可能不应该为classNames使用“green”和“red”，我只是为了插图而做了

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

切换/选择更改div

1 个答案: