jqueryは選択されたアイテムの色の変更を実装します-フロントエンドQ&A-php.cn

jqueryは選択されたアイテムの色の変更を実装します

WBOY

リリース： 2023-05-12 11:55:06

オリジナル

1102 人が閲覧しました

jQuery は、開発者の JavaScript プログラミングを簡素化し、開発効率を向上させる非常に人気のある JavaScript ライブラリです。 Web 開発では、より良いユーザーエクスペリエンスを提供するために、ページ要素のスタイルを変更する必要があることがよくあります。この記事では、選択した項目の色を変更する機能をjQueryで実装する方法を紹介します。

1. HTML 構造

まず、選択した項目の色を変更する効果を示すために、いくつかのリスト要素を HTML に追加する必要があります。以下は単純な HTML 構造です。

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

ログイン後にコピー

ここでは ul 要素が定義されており、これには 4 つの li 要素が含まれています。ユーザーが li 要素の 1 つをクリックすると、要素が選択状態に設定され、その背景色が変更されます。

2. 選択した項目の色の変更を実現する jQuery

次に、jQuery を使用して、ユーザーがリスト項目をクリックしたときに色の変更効果を実現する必要があります。具体的な手順は次のとおりです。

jQuery セレクターを介してすべての li 要素を取得し、それらに click イベントをバインドします。

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

ログイン後にコピー

クリックされた li 要素ごとに、CSS クラス selected を追加し、他のすべてのリスト項目 selected# を削除する必要があります。＃＃クラス。

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

ログイン後にコピー

.selected {
    background-color: #f5f5dc;
}

ログイン後にコピー

完全な jQuery コードは次のとおりです:

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

ログイン後にコピー

三、エフェクトのプレビュー

最終的なエフェクトは次の図に示されています:

jqueryは選択されたアイテムの色の変更を実装します

4. 概要

この記事では、その方法を紹介します。 jQueryを使用して選択を実現するアイテムの色を変更する機能。この記事を学習することで、DOM 要素にアクセスし、CSS クラスを追加および削除し、jQuery を通じてページをリアルタイムで更新する方法を学習しました。この記事が jQuery の学習と Web 開発の効率向上に役立つことを願っています。

以上がjqueryは選択されたアイテムの色の変更を実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。