一段JQUERY写的开关代码，越写越迷糊，头好乱哦，怎么弄？

Question

http://jsfiddle.net/CkTRa/2924/

onoff开关下面有一个on一个off，off的css里有opacity: 0;

我想要得到的效果是，只有一个是开的，其他都是关的，然后点击以后也可以切换ONOFF。

单独点一个，其他都跟着变，点旁边的就跟乱套了。

我是新手，头脑转不过来，不知道怎么写了，好迷糊，写乱套了。

求助各位大神帮忙！

$(document).on('click', '.onoff', function() {
  if ($(this).parents().siblings().find('.off').css("opacity") == "0") {
        $(this).parents().siblings().find('.on').animate({marginLeft: '+=12px',opacity: 1},250)
        .next('.off').animate({marginLeft: '-=12px',opacity: 0}, 250);
  };
  
  if (!$(this).hasClass("isonoff")) {
        $(this).find('.on').animate({marginLeft: '-=12px',opacity: 0},250)
        .next('.off').animate({marginLeft: '+=12px',opacity: 1}, 250);
        $(this).addClass("isonoff");
  } else {
        $(this).find('.on').animate({marginLeft: '+=12px',opacity: 1},250)
        .next('.off').animate({marginLeft: '-=12px',opacity: 0}, 250);
        $(this).removeClass("isonoff");
  };
});

Answer 1

http://jsfiddle.net/jamesfanc...

基本思路：

先判断点击的这个是 on 还是 off，

• 如果是 on

  • 直接动画关闭，然后设置为 off

• 否则，是 off

  • 找到当前是 on 的所有 onoff，动画关闭，设置它们为 off
  • 对当前这个动画打开，设置为 on (或者说去掉 off)

逻辑很简单，而且具有简单的容错能力。

顺便说一句，你的 isonoff 这个名称意义不明确，它到底表示 on 还是 off 呢？

Answer 2

是不是大概这种效果
http://jsfiddle.net/CkTRa/2926/