Question

在撰写本文时，颜色按照层次排序，其中紫色具有最高优先级。如何更改此设置，以便最近添加的颜色获得最高优先级？这是我的代码：

<table id="palette">
    <tr>
        <td id="yellowPaint" class="yellow"></td>
        <td id="redPaint" class="red"></td>
        <td id="purplePaint" class="purple"></td>            
        <td id="bluePaint" class="blue"></td>
        <td id="greenPaint" class="green"></td>
        <td id="orangePaint" class="orange"></td>
        <td id="whitePaint" class="white"></td>
        <td id="blackPaint" class="black"></td>
    </tr>
</table>

<script>

    $(document).ready(function(){

        var color = "white";

        $('#yellowPaint').click(function(){
            color = "yellow";
        })

        $('#redPaint').click(function(){
            color = "red";
        })

        $('#purplePaint').click(function(){
            color = "purple";
        })

        $('#bluePaint').click(function(){
            color = "blue";
        })

        $('#greenPaint').click(function(){
            color = "green";
        })

        $('#orangePaint').click(function(){
            color = "orange";
        })

        $('#whitePaint').click(function(){
            color = "white";
        })

        $('#blackPaint').click(function(){
            color = "black";
        })

        $('#massiveTable td').mouseenter(function(){
            $(this).addClass(color);
        });
    });

</script>

根据要求提供CSS：

.white {
    background-color: white;
}

.green {
    background-color: green;
}

.blue {
    background-color: blue;
}

.black {
    background-color: black;
}

.red {
    background-color: red;
}

.yellow {
    background-color: yellow;
}

.orange {
    background-color: orange;
}

.purple {
    background-color: purple;
}

您可以在pseudostories.com/draw上看到结果

Answer 1

而不是addClass，完全替换它：

$('#massiveTable td').mouseenter(function(){
    $(this).attr('class',color);
});

Answer 2

在添加新类之前删除所有以前的类：

$('#massiveTable td').mouseenter(function(){
    $(this).removeClass();
    $(this).addClass(color);
});

如何确定最近添加的类的背景颜色的优先级

2 个答案: