Home > Article > Web Front-end > jquery implements collection icon switching

jquery implements collection icon switching

王林Original: 2023-05-28 10:44:09564browse

In front-end development, it is often necessary to use some interactive effects, such as switching favorite icons. The collection icon is a common feature on websites or applications. It allows users to quickly collect their favorite content and provides users with a better experience. Next we will introduce how to use jquery to switch favorite icons.

1. Create an HTML page

First, we need to create a simple HTML page to display the collection icon and simulate the collection function. The specific code is as follows:

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

In this HTML page, we created a div container that contains two img tags, which are used to display uncollected and collected icons respectively. In order to achieve the switching effect of icons, we added the style attribute "display:none;" to the collected icons, which means that the icon is hidden in the initial state. At the same time, we also created a button on the page to simulate the collection function.

2. Implement icon switching

Next, we use jquery to achieve the icon switching effect. The specific code is as follows:

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

In this code, we first use the jquery selector to obtain the collected and uncollected icons, and then decide which icon to switch to by judging whether the collected icon is displayed. If the favorite icon is displayed, the favorite icon is hidden and the unfavorite icon is displayed; if the unfavorite icon is displayed, the unfavorite icon is hidden and the favorite icon is displayed.

3. Effect display

Finally, let’s take a look at the effect. Open this HTML page in the browser, click the favorite button, and you can see the icon switching effect.

The above is how to use jquery to switch favorite icons. Through this example, we can learn how to use jquery to create interactive effects and enhance the user experience of a website or application. If you are interested in front-end development, you might as well practice more and learn in depth.

The above is the detailed content of jquery implements collection icon switching. For more information, please follow other related articles on the PHP Chinese website!

jquery html 选择器 display

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：jquery replace content valueNext article：jquery replace content value

See more

jquery implements collection icon switching

Related articles