javascript - 如何防止使用jquery向两个以上元素添加类？

Question

我有一个包含可选单元格的表格，现在我尝试阻止一次选择两个以上的单元格。它应该像这样工作:如果我单击单元格 ID 4 那么它应该获得类 selected 如果接下来我单击单元格 ID 16 那么它也应该获取类selected，但如果接下来我单击单元格id20，那么单元格id4应该删除类selected和id 20 应该选择类。
我已经有类似的东西jsfiddle

$(".currency-cell").click(function(){
    if ($(this).hasClass("selected"))
        $(this).removeClass("selected");
    else {
        $(this).addClass("selected");
}).hover(function(){
   $(this).css("background","gold");
},
function(){
    if($(this).hasClass("selected"))
        $(this).css("background","gold");
    else
        $(this).css("background","silver");
});

Answer 1

您需要将所选元素的id存储在数组中。单击 td 时，将其 id 插入到数组末尾，或者如果数组中存在，则将其删除。如果数组长度大于 2，则删除数组的第一个索引。

var selectedIds = [];
$(".currency-cell").click(function(){
    $(this).toggleClass("selected");

    var id = $(this).attr("id");  
    if (selectedIds.indexOf(id) == -1)
       selectedIds.push(id);
    else   
        selectedIds.splice(selectedIds.indexOf(id), 1);
    
    if (selectedIds.length > 2) {  
        $("#" + selectedIds[0]).removeClass("selected");
        selectedIds.splice(0, 1);
    }       
});

table { 
    width: 200px; 
}
.currency-cell {
    width: 40px;
    height: 40px;
    border: 1px solid silver;
}
.selected { 
    background-color: gold; 
}
.currency-cell:hover { 
    background: gold; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tr>
        <td id="24" class="currency-cell"></td>
        <td id="6" class="currency-cell"></td>
        <td id="4" class="currency-cell"></td>
        <td id="14" class="currency-cell"></td>
    </tr>
    <tr>
        <td id="1" class="currency-cell"></td>
        <td id="7" class="currency-cell"></td>
        <td id="8" class="currency-cell"></td>
        <td id="22" class="currency-cell"></td>            
    </tr>
    <tr>
        <td id="27" class="currency-cell"></td>
        <td id="30" class="currency-cell"></td>
        <td id="28" class="currency-cell"></td>
        <td id="29" class="currency-cell"></td>
    </tr>
</table>

您可以在 jsfiddle 中的完整 html 上进行测试。