jquery implémente le changement de couleur des éléments sélectionnés-Questions et réponses frontales-php.cn

jquery implémente le changement de couleur des éléments sélectionnés

WBOY

Libérer： 2023-05-12 11:55:06

original

1084 Les gens l'ont consulté

jQuery est une bibliothèque JavaScript très populaire qui peut simplifier la programmation JavaScript des développeurs et améliorer l'efficacité du développement. Dans le développement Web, afin d'offrir une meilleure expérience utilisateur, nous devons souvent apporter des modifications de style aux éléments de la page. Cet article présentera comment jQuery implémente la fonction de changement de couleur des éléments sélectionnés.

1. Structure HTML

Tout d'abord, nous devons ajouter quelques éléments de liste au HTML pour démontrer l'effet du changement de couleur de l'élément sélectionné. Ce qui suit est une structure HTML simple :

<!DOCTYPE html>
<html>
<head>
    <title>选中项变颜色</title>
    <meta charset="utf-8">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <style>
        .selected {
            background-color: #f5f5dc;
        }
    </style>
</head>
<body>
    <ul id="list">
        <li>列表项1</li>
        <li>列表项2</li>    
        <li>列表项3</li>    
        <li>列表项4</li>
    </ul>
</body>
</html>

Copier après la connexion

Un élément ul est défini ici, qui contient quatre éléments li. Lorsque l'utilisateur clique sur l'un des éléments li, nous définissons l'élément dans son état sélectionné et modifions sa couleur d'arrière-plan. ul 元素，其中包含四个 li 元素。当用户点击其中的一个 li 元素时，我们将该元素设置为选中状态，并改变它的背景颜色。

二、jQuery 实现选中项变颜色

接下来，我们需要使用 jQuery 在用户点击列表项时实现变色效果。以下是具体步骤：

通过 jQuery 选择器获取所有的 li 元素，并给它们绑定 click 事件。

$(document).ready(function(){
    $("#list li").click(function(){
        // TODO: 点击事件处理逻辑
    });
});

Copier après la connexion

对于每个被点击的 li 元素，我们需要添加一个 CSS 类 selected，并移除其他所有列表项的 selected

```
$("#list li").click(function(){
    // 添加选中状态
    $(this).addClass('selected');
    // 移除其他元素的选中状态
    $(this).siblings().removeClass('selected');
});
```
Copier après la connexion