javascript - L'événement Click du Li d'Ul après le déménagement entre en conflit avec l'événement de déménagement

Question

Comme le montre l'image : l'effet que je souhaite est que lorsque le li de ul est déplacé, la couleur passe au rouge, et lorsqu'il est déplacé, la couleur passe au bleu
Mais si un certain li est sélectionné (c'est-à-dire , cliqué), j'espère que ce li restera jusqu'à ce que le prochain li soit cliqué. Il est rouge Même si la souris le traverse à nouveau et que l'événement de suppression est déclenché, il doit toujours rester rouge jusqu'à ce qu'un autre li soit cliqué.

Ce qui suit est mon code. L'effet de ce code ne peut être qu'après avoir cliqué, si le li est déplacé vers l'extérieur, la couleur restera bleue. Cependant, si le li cliqué est à nouveau déplacé vers l'intérieur et l'extérieur, sa couleur ne restera pas. rouge et deviendra bleu.

Quelqu'un peut-il m'aider à le résoudre =-= Merci d'avance

<ul class="h1">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>
<script>
    $('.h1 li').mouseenter(function(){
        $(this).css({"background":"red"})
        $(this).on("click",function(){
            $('.h1 li').css({"background":"blue"})
            $(this).css({"background":"red"})
            $(this).mouseleave(function(){
                $(this).css({"background":"red"})
            })
        })
    }).mouseleave(function(){
        $(this).css({"background":"blue"})
    })
</script>

Answer 1

Changer la position du CSS peut obtenir l'effet. Si vous ne me croyez pas, essayez-le. DEMO J'en écrirai une plus tard quand j'aurai le temps.

js distingue simplement sur lequel vous cliquez

Answer 2

Vous pouvez utiliser la priorité de style par inspection visuelle. La classe ajoutée lorsque vous cliquez est ajoutée avec !important La priorité d'une autre classe ajoutée lorsque vous emménagez est inférieure à celle ajoutée lorsque vous cliquez~

.

Answer 3

css

.h1 li {
    background-color: blue;
}
.h1 li:hover{
    background-color: red;
}
.chosen {
    background-color: red!important;
}

js :

$('.h1 li').click(function() {
    $('.h1 li').removeClass('chosen');
    $(this).addClass('chosen');
})

Answer 4

Merci pour l'invitation.

HTML :

<ul class="h1">
    <li class="bl">1</li>
    <li class="bl">2</li>
    <li class="bl">3</li>
    <li class="bl">4</li>
    <li class="bl">5</li>
</ul>

CSS :

.bl {
    background-color: blue;
}
.bl:hover{
    background-color: red;
}
.clk {
    background-color: red;
}

JavaScript :

$('.h1>li').click(function() {
    $('.clk').removeClass('clk').addClass('bl');
    $(this).removeClass('bl').addClass('clk');
})

Est-ce le cas ?