Jquery realizes clicking to switch pictures and hide the displayed content (2 methods to achieve)

Jquery realizes clicking to switch pictures and hide the displayed content (2 methods to achieve)_jquery

WBOY

Release： 2016-05-16 17:37:29

Original

1066 people have browsed it

Our computer screen size is fixed, so how to put more content in a limited space?
We should give users enough choices. When they want to see certain content, they can quickly see it, and when they don’t want to see it, they can hide it. So there is the question mentioned in the title.

In fact, this question is very simple. So, the reason why I share it with you is that on the one hand we all communicate with each other, and on the other hand, it is also a summary of our own learning.

Here I think of two methods to share with you.
Enough to say, let’s look at the code below:

The first is the conventional method :
[javascript]

Copy code The code is as follows:

$(function(){
var images = ['images/up.png', ' images/down.png']
$(img).onClick(function(){
if($(img).attr("class")=="up"){
$(img ).attr("src",images[1]);
$(img).removeClass();
}else{
$(img).attr("src",images[0] );
$(img).addClass("up");
}
});
})

$(function(){
var images = ['images/up.png', 'images/down.png']
$(img).onClick(function(){
if($(img).attr("class")=="up"){
$(img).attr("src",images[1]);
$(img) .removeClass();
}else{
$(img).attr("src",images[0]);
$(img).addClass("up");
}
});
})

This is mainly to register a picture control Click event, add CSS control when clicked (css mainly sets whether to display a certain part of the content), and change the image at the same time.

Second method: Use arguments.callee.em ^= 1 to automatically select array parameters
[javascript]

Copy code The code is as follows:

 
functionchangeimg() { 
//Change images
var images = ['images/up.png', 'images/down.png'] 
var imgupdown =document.getElementById("hideimg"); 
imgupdown.src = images[arguments.callee.em^= 1]; 
//Hide the bottom div 
var content =$(".hidecontent"); 
//Determine the operation to be performed based on the display attribute
if (content.css("display")!= "none") { 
content.slideUp("slow"); 
} else { 
content.slideDown("slow"); ; 
} 
} 
functionchangeimg() { 
//Change Pictures
var images = ['images/up.png','images/down.png'] 
var imgupdown =document.getElementById("hideimg"); 
imgupdown.src = images[arguments. callee.em^= 1]; 
//Hide the div below 
var content =$(".hidecontent"); 
//Determine the operation to be performed based on the display attribute
if (content .css("display")!= "none") { 
content.slideUp("slow"); 
} else { 
content.slideDown("slow"); ; 
} 
} 

Here, the image address is placed in an array, XOR operation is performed, and the array parameters are automatically selected to achieve image switching.
To hide and display content, the .css attribute is used.
The following is the rendering: (to be added)