Question

我是新来的，有人可以帮助我...... 我有2个div的#main和#side。

在我的#main div中，我的复选框很少，

在已检查的事件上，我将我的复选框标签添加到#side div并添加/删除一些类并且它正常运行

但是当我取消选中我的输入时，它不能正常工作，不能添加/删除类或者支持#main div

这是我的代码

@keyframes slide-from-center{
  from {left: 50%}
  to {left: -50%}
}

@keyframes slide-from-right{
  from {left: 150%}
  to {left: 50%}
}

body {
  display: flex;
  overflow-x: hidden;
  overflow-y: hidden;
}

.content {
  display: flex;
  margin-left: auto;
  margin-right: auto;
}

.text {
  position: relative;
  min-width: 200px;
  min-height: 100px;
  background-color: teal;
  color: white;
  border: 4px solid black;
  border-radius: 5px;
  margin-left: 10px;
  overflow: hidden;
}

.text h1 {
  position: absolute;
  transform: translate(-50%, -50%);
  font-size: 0.8rem;
  width: 100%;
  text-align: center;
  margin: auto 0 auto 0;
  top: 50%;
}

.text h1:first-of-type{
  left: 50%;
  animation: slide-from-center 3s linear 1 forwards;
}

.text h1:nth-of-type(2){
  left: 150%;
  animation: slide-from-right 3s linear 1 forwards;
}

先谢谢

这是完整的代码。 http://jsfiddle.net/o8n1b8z1/4/

Answer 1

对你的else语句进行了一些更改并且它有效。问题是Label被移出，而else部分不再识别标签了。这是小提琴http://jsfiddle.net/o8n1b8z1/5/

   else 
        {      // This condition working //

    var id=$(this).attr('id');
    var label = $('label[for="' + id + '"]');
                    label.addClass("icon");

                    label.removeClass("icon-active");
                    $( "#"+id ).after(label);
        }

Answer 2

首先，由于您使用的是jQuery，我建议您不要使用this.checked，而应使用$(this).is(':checked')。

但是，您的代码没有反向工作的原因是因为您在检查复选框时移动了.next('label')中的DOM。因此，在取消选中时，.next('label')将不会完全返回标签，因为它已被移动。

这是我写你的功能的方式：

$('input[type="checkbox"]').on('change', function(){
  var label = $('label[for="'+$(this).attr('id')+'"]'),
      checked = $(this).is(':checked');
  label.toggleClass("icon icon-active").appendTo(checked?'#side':'#main')
})

现在，您的脚本的另一个问题是，在返回时，它会将标签附加到div的末尾，而不是在复选框之后。要解决这个问题，请使用以下内容：

$('input[type="checkbox"]').on('change', function() {
  var label = $('label[for="' + $(this).attr('id') + '"]'),
      checked = $(this).is(':checked');
  label.toggleClass("icon icon-active")[
      checked ? 'appendTo' : 'insertAfter'
  ]($(checked ? '#side' : this));
})

更新了您的fiddle

否则条件不工作java脚本/ jquery

2 个答案: