我正在创建一个小应用程序，我无法弄清楚为什么选择项目不起作用。我尝试使用toggleClass（），但它有相同的影响。切换类'selected'仅适用于奇数元素。
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');
}
});
});
});
答案 0 :(得分：2)
$('.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>
答案 1 :(得分：1)
这是因为每次用户点击#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();
}
});
});