jqueryはコレクションアイコンの切り替えを実装します-フロントエンドQ&A-php.cn

jqueryはコレクションアイコンの切り替えを実装します

王林

リリース： 2023-05-28 10:44:09

オリジナル

586 人が閲覧しました

フロントエンド開発では、お気に入りのアイコンの切り替えなど、いくつかのインタラクティブな効果を使用する必要があることがよくあります。コレクションアイコンは、Web サイトやアプリケーションでよく使用される機能で、ユーザーがお気に入りのコンテンツをすばやく収集し、ユーザーエクスペリエンスを向上させることができます。次にjqueryを使ってお気に入りのアイコンを切り替える方法を紹介します。

1. HTML ページの作成

まず、コレクションアイコンを表示し、コレクション機能をシミュレートするための単純な HTML ページを作成する必要があります。具体的なコードは次のとおりです。

<!DOCTYPE html>
<html>
  <head>
    <title>jquery实现收藏图标切换</title>
    <meta charset="utf-8">
    <script src="https://cdn.bootcss.com/jquery/3.5.1/jquery.min.js"></script>
  </head>
  <body>
    <h1>收藏图标切换</h1>
    <div id="collection">
      <img src="uncollect.png" alt="uncollected" id="uncollected"
        width="50" height="50">
      <img src="collected.png" alt="collected" id="collected"
        width="50" height="50" style="display:none;">
    </div>
    <button id="collect-btn">收藏</button>
  </body>
</html>

ログイン後にコピー

この HTML ページでは、未収集のアイコンと収集済みのアイコンをそれぞれ表示するために使用される 2 つの img タグを含む div コンテナを作成しました。アイコンの切り替え効果を実現するために、収集したアイコンにスタイル属性「display:none;」を追加しました。これは、初期状態ではアイコンが非表示であることを意味します。同時に、コレクション機能をシミュレートするためのボタンもページ上に作成しました。

2. アイコン切り替えの実装

次に、jquery を使用してアイコン切り替え効果を実現します。具体的なコードは以下の通りです。

$(function() {
  // 收藏按钮的点击事件
  $("#collect-btn").click(function() {
    // 获取已收藏和未收藏的图标
    var uncollected = $("#uncollected");
    var collected = $("#collected");
    // 判断已收藏图标是否显示
    if (collected.is(":visible")) {
      // 如果已收藏图标显示，则切换成未收藏图标
      collected.hide();
      uncollected.show();
    } else {
      // 如果未收藏图标显示，则切换成已收藏图标
      uncollected.hide();
      collected.show();
    }
  });
});

ログイン後にコピー

このコードでは、まずjqueryセレクタを使って収集済みアイコンと未収集アイコンを取得し、収集済みアイコンが表示されているかどうかを判断して切り替え先のアイコンを決定しています。お気に入りアイコンが表示されている場合には、お気に入りアイコンが非表示となり、お気に入りアイコンが表示され、非お気に入りアイコンが表示されている場合には、非お気に入りアイコンが非表示となり、お気に入りアイコンが表示される。

3. エフェクト表示

最後にエフェクトを見てみましょう。この HTML ページをブラウザで開き、お気に入りボタンをクリックすると、アイコンの切り替え効果が確認できます。

以上はjqueryを使ってお気に入りのアイコンを切り替える方法です。この例を通じて、jquery を使用してインタラクティブな効果を作成し、Web サイトやアプリケーションのユーザーエクスペリエンスを向上させる方法を学ぶことができます。フロントエンド開発に興味がある場合は、もっと練習して深く学ぶとよいでしょう。

以上がjqueryはコレクションアイコンの切り替えを実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。