jquery change icon

With the continuous development of Internet technology, jQuery has become one of the indispensable tools in front-end development. The power of jQuery is that it provides a wealth of functions and methods that can help us quickly complete various front-end interactive effects.

Among them, the operation of changing the icon is an effect we often use. In this article, we will explain how to use jQuery to change icons.

1. Import the jQuery file

First, we need to introduce the jQuery file. You can add the following code in the head tag:

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

The jQuery3.5.1 version is used here, you can choose according to your own needs.

2. Create HTML structure

Next, we need to create an HTML structure to display the icon that needs to be changed. For example, we can use the following code:

<div class="icon-container">
   <i class="fas fa-heart"></i>
</div>

The icons in Font Awesome are used here, and you can replace them with other icons.

3. Write jQuery code

Now we can start writing jQuery code. First, we need to get the icon element that needs to be changed. The following code can be used:

var icon = $('.icon-container i');

Next, we can add a click event to the icon element to change the icon when clicked. You can use the following code:

icon.click(function() {
   if (icon.hasClass('fa-heart')) {
      icon.removeClass('fa-heart');
      icon.addClass('fa-thumbs-up');
   } else {
      icon.removeClass('fa-thumbs-up');
      icon.addClass('fa-heart');
   }
});

In this code, we determine the current icon status by determining whether the icon element contains the fa-heart class. If it is currently a red heart icon, change it to a like icon; if it is currently a like icon, change it to a red heart icon.

4. Complete code

The following is the complete HTML and jQuery code for reference:

    
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    
    


    

       
    
    
    <script>
    var icon = $('.icon-container i');

    icon.click(function() {
       if (icon.hasClass('fa-heart')) {
          icon.removeClass('fa-heart');
          icon.addClass('fa-thumbs-up');
       } else {
          icon.removeClass('fa-thumbs-up');
          icon.addClass('fa-heart');
       }
    });
    </script>

5. Summary

Through the introduction of this article, we Learned how to use jQuery to change icons. Of course, this is just the tip of the iceberg, jQuery has many other powerful features. I hope we can use it flexibly in actual development to improve development efficiency and achieve better results.

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