jQuery：开关效果混淆

Question

我有问题

.onoff 切换下面一个.on 和.off，在CSS 中不透明度：0；

我想得到的效果只有一个开，另一个关，可以切换ONOFF。

现在很混乱，我不知道该怎么做......

请帮帮我。

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

$(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/CkTRa/2929/

$(document).on('click', '.onoff', function() {
  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");
    
    var index = $(this).closest('.post').index();

    $('.onoff').each(function(){
    	if(index != $(this).closest('.post').index()){
    	$(this).find('.on').animate({marginLeft: '-=12px',opacity: 0},250)
		    .next('.off').animate({marginLeft: '+=12px',opacity: 1}, 250);
    	$(this).addClass('isonoff');
      }
    });
  };
});

.post {
  width: 666px;
  height: 111px;
  outline: none;
  background-color: #fff;
  display: block;
  position: relative;
  overflow: hidden;
  text-align: start;
  margin-bottom: 20px;
}

.onoff {
  cursor: pointer;
  width: 33px;
  height: 33px;
  position: absolute;
  left: 15px;
  bottom: 15px;
  background: #abcdef;
}

.on {
  width: 33px;
  height: 33px;
  position: absolute;
  top: 0px;
  cursor: pointer;
  left: 13px;
  background: #abc456;
}

.off {
  width: 33px;
  height: 33px;
  position: absolute;
  left: 0px;
  opacity: 0;
  top: 0px;
  cursor: pointer;
  background: #defabc;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="post">
  <div class="vid">
    <h3 class="video">video 1</h3>
    <div class="onoff">
      <i class="on">on</i>
      <i class="off">off</i>
    </div>
  </div>
</div>
<div class="post">
  <div class="vid">
    <h3 class="video">video 2</h3>
    <div class="onoff">
      <i class="on">on</i>
      <i class="off">off</i>
    </div>
  </div>
</div>
<div class="post">
  <div class="vid">
    <h3 class="video">video 3</h3>
    <div class="onoff">
      <i class="on">on</i>
      <i class="off">off</i>
    </div>
  </div>
</div>
<div class="post">
  <div class="vid">
    <h3 class="video">video 4</h3>
    <div class="onoff">
      <i class="on">on</i>
      <i class="off">off</i>
    </div>
  </div>
</div>

希望这会对你有所帮助。