javascript - 如何使当前元素切换，而不是让所有元素切换

Question

我有三个 div 类型的复选框，我可以切换它们，但不是点击任何一个，所有的复选框都被切换了。我只想切换所选元素。

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

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

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>

在这里，如果我选择了所有的复选框，我想切换已被点击的当前对象。我也使用了“This”关键字，但没有用。

Answer 1

您需要使用适当的上下文定位 .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 元素只有 $(this).find('.txt') 和当前点击的 .outer-box 与 $(this)。

另请注意，您在 HTML 中有重复的 id，您应该改用例如类来修复它。

演示:http://jsfiddle.net/tUbem/