Question

我有三个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>

这里，如果我选择所有获取toogle的checbox，而不是我要切换已被点击的当前对象。我也使用了'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，您应该通过使用类来修复它。

如何使当前元素切换，而不是获取切换所有元素

1 个答案:

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