toggleclass()仅处理奇数元素

我正在创建一个小应用程序，我无法弄清楚为什么选择项目不起作用。我使用toggleclass（）尝试了它，但是它具有相同的影响。切换类"选定"仅在奇数元素上起作用。

http://codepen.io/sobrancelhas/pen/enqvgy

    $(document).ready(function() {
    $('#options :checkbox').change(function() {
        if (this.checked) {
            $('#botao').addClass('adicionar');
            $('#botao').html('Add');
        } else {
            $('#botao').removeClass('adicionar');
            $('#botao').html('Remove');
        }
    });
    $('#botao').click(function() {
        if($(this).hasClass('adicionar')){
            $('#container').append('<div class="item">ITEM</div>');
        } else {
            $('#container').find(".item:last").remove();
        }
        $('.item').click(function(){
                if($(this).hasClass('selected')){
                    $(this).removeClass('selected');
                } else {
                    $(this).addClass('selected');
                }
        });
    });
});

$('.item').click(function(){函数应不在$('#botao').click(function() {函数内部。
您应该将$('.item').click(function(){更改为$(document).on('click', '.item'，以支持您在加载页面后添加的新元素。

这是修复：

$(document).ready(function() {
  $('#options :checkbox').change(function() {
    if (this.checked) {
      $('#botao').addClass('adicionar');
      $('#botao').html('Add');
    } else {
      $('#botao').removeClass('adicionar');
      $('#botao').html('Remove');
    }
  });
  $('#botao').click(function() {
    if($(this).hasClass('adicionar')){
      $('#container').append('<div class="item">ITEM</div>');
    } else {
      $('#container').find(".item:last").remove();
    }
  });
  $(document).on('click', '.item', function(){
    if($(this).hasClass('selected')){
      $(this).removeClass('selected');
    } else {
      $(this).addClass('selected');
    }
  });
});

body{
font-family: Cambria, Hoefler Text, Liberation Serif, Times, Times New Roman, serif;
}
#options{
display: block;
position: relative;
}
#botao {
position: absolute;
top: 0;
left: 83px;
height: 34px;
display: flex;
padding: 9px 13px;
border: none;
background: #f56363;
color: #fff;
-webkit-transition: .4s;
transition: .4s;
}
#botao.adicionar{
background:#2196F3;
}
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.switch input {display:none;}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #f56363;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #2196F3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
#container{
background: #b8e0f1;
min-height: 400px;
max-height: 600px;
overflow: auto;
width: 30%;
margin-top: 15px;
padding: 8px;
}
.item {
background: #607D8B;
width: 100%;
height: 25px;
margin-top: 8px;
color: #fff;
text-align: center;
padding-top: 4px;
}
	
.item.selected{
background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
	<h1>Add, remove and select itens</h1>
	<div id="options">
		<label class="switch">
			<input type="checkbox" id="switch">
			<div class="slider"></div>
		</label>
		<button id="botao">Remove</button>
	</div>
	
	<div id="container">
	</div>
	
</body>

这是因为每次用户单击#botao，您都将新处理程序附加到所有.Items

您可以做这样的事情：

$(document).ready(function() {
    $('#options :checkbox').change(function() {
        if (this.checked) {
            $('#botao').addClass('adicionar');
            $('#botao').html('Add');
        } else {
            $('#botao').removeClass('adicionar');
            $('#botao').html('Remove');
        }
    });
    $('#botao').click(function() {
        if($(this).hasClass('adicionar')){
            $('#container').append('<div class="item">ITEM</div>');
            // adding handler only to the last item - which we've just added
            $('.item:last').click(function(){
                    $(this).toggleClass('selected');
            });
        } else {
            $('#container').find(".item:last").remove();
        }
    });
});

相关内容

最新更新

热门标签：