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>

希望这会对你有所帮助。