How to use JS to switch between hiding and showing icons at the same time

What I bring to you this time is how to use JS to switch between hiding and displaying and switching icons at the same time. This article will give you a good analysis.

HTML code:

       
   
  
这里是要显示或隐藏的内容
  　

JS code:

$(document).ready(function(){ //通过id="ctr"获取元素click事件 $("#ctr").click(function(){ //将显示和隐藏两个状态下的显示图标路径放入images变量中 var images=['./images/01.jpg','./images/02.jpg']; //通过class的值来判断控制显示的图标样式 if($("#ctr").attr("class")=="down"){ $("#ctr").attr("src",images[0]); $("#ctr").removeClass(); }else{ $("#ctr").attr("src",images[1]); $("#ctr").addClass("down"); } //用于控制元素的隐藏或显示 主要方法toggle(),300是控制元素显示或隐藏的速度 $("#info").toggle(300); }); });

I believe you have mastered the method after reading the above introduction. For more exciting information, please pay attention to other related articles on the php Chinese website!

Related reading:

How can ajax read local json

How to use vue to implement login verification

Use jQuery to deduplicate and sort arrays

The above is the detailed content of How to use JS to switch between hiding and showing icons at the same time. For more information, please follow other related articles on the PHP Chinese website!