Javascript 如何使当前元素旋转，而不是获取toggle all元素

我有三个div类型的checbox，我想切换它们，但是没有点击其中的任何一个，所有的checbox都被切换了。我只想切换选定的元素

 My code are as follows:

CSS
====

.outer-box {
  background: none repeat scroll 0 0 #ea5700;
  padding:1px;
  width:55px;
  height:23px;
  box-shadow: 2px 1px 2px #888888;
}

  .inner-box {
  transition:all .2s ease-in-out;
  background: none repeat scroll 0 0 #DDDDDD;
  width:15px;
  height:20px;
  margin-right:-2px;
  margin-left: 0px;
  display:block;
  right: -32px;
  padding: 4px 5px 3px 3px;
  position: relative;
  border:none;
  border-radius:2px;
  box-shadow: 2px 2px 2px #888888;
  }

  #right-box .inner-box {
    left: 37px;
  top: 0;
  }

.txt{
 padding:2px;
  /*font-family:'Roboto Slab', serif;*/
  font-weight:bold;
  font-size:;
  color:white;
 }

 #right-box .txt {
 float: left;
 }

  #left-box .inner-box {
  top: 0;
  left: 0px;

 }

 #left-box .txt {
  float: right; 
 }


JS 
 ===

 $(function() {

    $('.outer-box').click(function () {
    var value = $('.outer-box').attr('id');
    if (value === 'right-box') {
        $('.txt').text('NO');
        $('.txt').css('color','grey');
        $('.outer-box').attr('id', 'left-box');
        $('.outer-box').css('background','#e2e2e2');
    } else if (value === 'left-box') {
        $('.txt').text('Yes');
        $('.txt').css('color','white');
        $('.outer-box').attr('id', 'right-box');
        $('.outer-box').css('background','#ea5700');
    }
  });

下面是我的html代码，我在其中创建了三个div元素

HTML
====
  <div class="outer-box" id="right-box">
   <div class="txt" style="display:inline;">Yes</div>
     <div class="inner-box"></div>
  </div>

   <div class="outer-box" id="right-box">
   <div class="txt" style="display:inline;">Yes</div>
     <div class="inner-box"></div>
  </div>

 <div class="outer-box" id="right-box">
   <div class="txt" style="display:inline;">Yes</div>
     <div class="inner-box"></div>
  </div>

HTML
====
对
对
对

---

在这里，如果我选择任何一个复选框all getting toogle，我想切换已单击的当前对象。我也使用了“This”关键字，但没有用

您需要以具有适当上下文的

.txt

元素为目标：

$('.outer-box').click(function () {

    var value = this.id,
        $txt = $(this).find('.txt');

    if (value === 'right-box') {
        $txt.text('NO').css('color', 'grey');
        $(this).attr('id', 'left-box');
        $(this).css('background', '#e2e2e2');
    } 
    else if (value === 'left-box') {
        $txt.text('Yes').css('color', 'white');
        $(this).attr('id', 'right-box');
        $(this).css('background', '#ea5700');
    }
});

在单击处理程序内部，仅使用

$（此）选择相应的
.txt
元素。查找（'.txt'）

并当前单击

。外部框使用
$（此）

还请注意，您在HTML中有重复的ID，您应该改为使用类来修复它

演示：“在这里，如果我选择任何一个复选框，所有的复选框都会变圆…”如何？是什么在动它们？如果你不显示它，我们如何帮助你找出它不起作用的原因？ID必须是唯一的如果你使用重复的ID，那么你的文档是无效的。是的，它是一流的，现在得到了这个键盘的准确工作。现在它将在将来帮助我。我认为这一个可以被任何人使用，使他们这个关键字的概念清楚。谢谢你，伙计@dfsq