取消选定的div

Question

我有8div，当你点击一个div它被选中，它的值将被添加到一个数组。一旦你选择了5个div，其他的将被设置为"未选择"。你不能选择更多的潜水。现在我想要的是，如果你点击一个选定的div，我想从它删除选择功能，并有它的值从数组中删除，但我的方法是不工作。我怎样才能做到这一点呢?提前谢谢。

let testArray = []
$('.none').on('click', function() {
if (testArray.length < 4) {
testArray.push($(this).find('p').html())
$(this).removeClass('none')
$(this).addClass('selected')
} else if (testArray.length == 4) {
testArray.push($(this).find('p').html())
$(this).removeClass('none')
$(this).addClass('selected')
console.log(testArray)
$('.test').removeClass('none')
$('.test:not(.selected)').addClass('notSelected')
}
})
//not working
$('.selected').on('click', function() {
var filteredArray = testArray.filter(function(e) {
return e !== $(this).find('p').html()
})
testArray = filteredArray
$(this).removeClass('selected')
$('.test').removeClass('notSelected')
$('.test:not(.selected)').addClass('none')
console.log(testArray)
})

body {
display: flex;
flex-direction: row;
justify-content: space-evenly;
}
.test {
display: flex;
width: 100px;
height: 100px;
border: 2px solid transparent;
background-color: #000000;
margin-left: 2%;
}
.selected {
border: 2px solid green;
cursor: pointer;
}
.notSelected {
border: 2px solid red;
cursor: default;
}
.none:hover {
cursor: poiner;
}
.test p {
color: #ffffff;
margin: auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="test none">
<p>test1</p>
</div>
<div class="test none">
<p>test2</p>
</div>
<div class="test none">
<p>test3</p>
</div>
<div class="test none">
<p>test4</p>
</div>
<div class="test none">
<p>test5</p>
</div>
<div class="test none">
<p>test6</p>
</div>
<div class="test none">
<p>test7</p>
</div>
<div class="test none">
<p>test8</p>
</div>

Answer 1

当前逻辑的问题是因为您需要使用委托事件处理程序。这是因为您在运行时动态地添加/删除类，而事件处理程序仅在页面加载时绑定，在类得到更新之前。

还要注意你的逻辑比它需要的更复杂。可以用toggleClass()来简化。此外，应该避免使用全局变量。仅在必要时生成值数组。在这种情况下，所有选择都已完成，但是我将该逻辑提取到其自己的函数中，以便您可以在必要时调用它-例如在按钮单击下。最后，cursor在CSS中的使用可以稍微增加。

下面是一个解决上述所有问题的工作演示:

let $divs = $('.test');
let getSelectedItems = () => {
let selectedItems = $divs.filter('.selected').map((i, el) => $(el).text().trim()).get();
console.log(selectedItems);
}
$(document).on('click', '.none', function() {
$(this).toggleClass('none selected');

if ($divs.filter('.selected').length == 5) {
$divs.removeClass('none').not('.selected').addClass('notSelected');
getSelectedItems();
}
})
$(document).on('click', '.selected', function() {
$(this).removeClass('selected');
$divs.removeClass('notSelected').filter(':not(.selected)').addClass('none');
});
$('button').on('click', getSelectedItems);

body {
display: flex;
flex-direction: row;
justify-content: space-evenly;
}
.test {
display: flex;
width: 100px;
height: 100px;
border: 2px solid transparent;
background-color: #000000;
margin-left: 2%;
cursor: pointer;
}
.selected {
border: 2px solid green;
}
.test.notSelected {
border: 2px solid red;
cursor: default;
}
.test p {
color: #ffffff;
margin: auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="test none"><p>test1</p></div>
<div class="test none"><p>test2</p></div>
<div class="test none"><p>test3</p></div>
<div class="test none"><p>test4</p></div>
<div class="test none"><p>test5</p></div>
<div class="test none"><p>test6</p></div>
<div class="test none"><p>test7</p></div>
<div class="test none"><p>test8</p></div>
<button>Get test array</button>

Answer 2

我将提出另一种解决方案-设置一个数据属性，然后只需切换它。

这里我使用CSS中的数据值，所以我不需要切换任何东西，只需设置值。我放了几个按钮，只是为了显示正在发生的事情，以及如何过滤那些选择的数据集值。

let testArray = [];
let allTestable = $('.none.test');
let howMany = allTestable.length;
let maxCanSelect = 5;
$('.none.test').on('click', function(event) {
if (this.dataset.isselected == "true") {
this.dataset.isselected = "false";
} else {
var setToFun = allTestable.filter(function() {
return this.dataset.isselected == "true";
}).length;
if (setToFun < maxCanSelect) {
this.dataset.isselected = "true"
}
}
});
/* from here down is just to show what we have- above is all we specifically need */
$('#choices-done').on('click', function(event) {
testArray = [];
allTestable.filter(function() {
return this.dataset.isselected == "true";
}).each(function() {
testArray.push($(this).find('p').html());
});
$("#results").text(testArray);
});
$('#choices-restart').on('click reset', function(event) {
allTestable.filter(function() {
return this.dataset.isselected = "false";
});
testArray = [];
$("#results").text("");
}).trigger("reset");

.choice-things {
display: flex;
flex-direction: row;
justify-content: space-evenly;
}
.test {
display: flex;
width: 100px;
height: 100px;
border: 2px solid transparent;
background-color: #000000;
margin-left: 2%;
}
.test.none[data-isselected="true"] {
border: 2px solid green;
cursor: pointer;
}
.test.none[data-isselected="false"] {
border: 2px solid red;
cursor: default;
}
.none:hover {
cursor: poiner;
}
.test p {
color: #ffffff;
margin: auto;
}
.action {
display: flex;
margin-top: 2em;
align-self: bottom;
justify-content: space-evenly;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="choice-things">
<div class="test none">
<p>test1</p>
</div>
<div class="test none">
<p>test2</p>
</div>
<div class="test none">
<p>test3</p>
</div>
<div class="test none">
<p>test4</p>
</div>
<div class="test none">
<p>test5</p>
</div>
<div class="test none">
<p>test6</p>
</div>
<div class="test none">
<p>test7</p>
</div>
<div class="test none">
<p>test8</p>
</div>
</div>
<div class="action">
<button type="button" id="choices-done">Done yet click here</button>
<button type="button" id="choices-restart">Start over</button>
</div>
<div id="results"></div>