suchen

Heim  >  Artikel  >  Web-Frontend  >  jquery implementiert die Farbänderung ausgewählter Elemente

jquery implementiert die Farbänderung ausgewählter Elemente

WBOY
WBOYOriginal
2023-05-12 11:55:061087Durchsuche

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>

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

  1. 通过 jQuery 选择器获取所有的 li 元素，并给它们绑定 click 事件。
$(document).ready(function(){
    $("#list li").click(function(){
        // TODO: 点击事件处理逻辑
    });
});
  1. 对于每个被点击的 li 元素，我们需要添加一个 CSS 类 selected，并移除其他所有列表项的 selected
    2. 2. Verwenden Sie jQuery, um die Farbe des ausgewählten Elements zu ändern.
    Als nächstes müssen wir jQuery verwenden, um den Farbänderungseffekt zu erzielen, wenn der Benutzer auf das Listenelement klickt. Im Folgenden sind die spezifischen Schritte aufgeführt:
      1. Alle li-Elemente über den jQuery-Selektor abrufen und click-Ereignisse daran binden. 

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

      Für jedes angeklickte li-Element müssen wir eine CSS-Klasse selected hinzufügen und alle anderen Listenelemente entfernen. Der ausgewählte Klasse. 

      .selected {
    background-color: #f5f5dc;
}

      Fügen Sie abschließend einen Stil zur Hintergrundfarbe des ausgewählten Elements hinzu:

      jquery implementiert die Farbänderung ausgewählter Elemente

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

      Der vollständige jQuery-Code lautet wie folgt:

      rrreee

      3. Effektvorschau

      Der endgültige Effekt ist wie folgt: 🎜🎜 🎜🎜 🎜4. Zusammenfassung🎜🎜In diesem Artikel wird erläutert, wie Sie mit jQuery die Funktion zum Ändern der Farbe des ausgewählten Elements realisieren. Durch das Studium dieses Artikels haben Sie gelernt, wie Sie auf DOM-Elemente zugreifen, CSS-Klassen hinzufügen und entfernen und die Seite in Echtzeit über jQuery aktualisieren. Ich hoffe, dieser Artikel kann Ihnen helfen, jQuery zu erlernen und die Effizienz der Webentwicklung zu verbessern. 🎜

    Das obige ist der detaillierte Inhalt vonjquery implementiert die Farbänderung ausgewählter Elemente. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

    JavaScript jquery css html 事件 dom 选择器 ul li
    Stellungnahme：
    Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
    Vorheriger Artikel：Welches JavaScript-Buch ist besser?Nächster Artikel：Welches JavaScript-Buch ist besser?

    In Verbindung stehende Artikel

    Mehr sehen