jquery implementiert die Farbänderung ausgewählter Elemente-Front-End-Fragen und Antworten-php.cn

jquery implementiert die Farbänderung ausgewählter Elemente

WBOY

Freigeben： 2023-05-12 11:55:06

Original

1105 Leute haben es durchsucht

jQuery ist eine sehr beliebte JavaScript-Bibliothek, die die JavaScript-Programmierung von Entwicklern vereinfachen und die Entwicklungseffizienz verbessern kann. In der Webentwicklung müssen wir häufig Stiländerungen an Seitenelementen vornehmen, um ein besseres Benutzererlebnis zu bieten. In diesem Artikel wird vorgestellt, wie jQuery die Funktion zum Ändern der Farbe ausgewählter Elemente implementiert.

1. HTML-Struktur

Zunächst müssen wir einige Listenelemente zu HTML hinzufügen, um die Auswirkung einer Farbänderung des ausgewählten Elements zu demonstrieren. Das Folgende ist eine einfache HTML-Struktur:

<!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>

Nach dem Login kopieren

Hier wird ein ul-Element definiert, das vier li-Elemente enthält. Wenn der Benutzer auf eines der li-Elemente klickt, versetzen wir das Element in seinen ausgewählten Status und ändern seine Hintergrundfarbe. ul 元素，其中包含四个 li 元素。当用户点击其中的一个 li 元素时，我们将该元素设置为选中状态，并改变它的背景颜色。

二、jQuery 实现选中项变颜色

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

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

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

Nach dem Login kopieren

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

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