recherche

Maison >interface Web >Questions et réponses frontales >jquery implémente le changement de couleur des éléments sélectionnés

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

WBOY
WBOYoriginal
2023-05-12 11:55:061121parcourir

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>

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 在用户点击列表项时实现变色效果。以下是具体步骤：

  1. 通过 jQuery 选择器获取所有的 li 元素，并给它们绑定 click 事件。
$(document).ready(function(){
    $("#list li").click(function(){
        // TODO: 点击事件处理逻辑
    });
});
  1. 对于每个被点击的 li 元素，我们需要添加一个 CSS 类 selected，并移除其他所有列表项的 selected
    2. 2. Utilisez jQuery pour changer la couleur de l'élément sélectionné
    Ensuite, nous devons utiliser jQuery pour obtenir l'effet de changement de couleur lorsque l'utilisateur clique sur l'élément de la liste. Voici les étapes spécifiques :
      1. Obtenez tous les éléments li via le sélecteur jQuery et liez-leur les événements click. 

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

      Pour chaque élément li cliqué, nous devons ajouter une classe CSS selected et supprimer tous les autres éléments de la liste Le classe sélectionnée. 

      .selected {
    background-color: #f5f5dc;
}

      Enfin, ajoutez un style à la couleur d'arrière-plan de l'élément sélectionné :

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

      $(document).ready(function(){
    $("#list li").click(function(){
        // 添加选中状态
        $(this).addClass('selected');
        // 移除其他元素的选中状态
        $(this).siblings().removeClass('selected');
    });
});

      Le code jQuery complet est le suivant :

      rrreee

      3. Aperçu de l'effet

      L'effet final est le suivant : 🎜🎜 🎜🎜 🎜4. Résumé🎜🎜Cet article explique comment utiliser jQuery pour réaliser la fonction de changement de couleur de l'élément sélectionné. En étudiant cet article, vous avez appris à accéder aux éléments DOM, à ajouter et supprimer des classes CSS et à mettre à jour la page en temps réel via jQuery. J'espère que cet article pourra vous aider à apprendre jQuery et à améliorer l'efficacité du développement Web. 🎜

    Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

    JavaScript jquery css html 事件 dom 选择器 ul li
    Déclaration：
    Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
    Article précédent：Quel livre JavaScript est le meilleur ?Article suivant：Quel livre JavaScript est le meilleur ?

    Articles Liés

    Voir plus