Jquery實作點擊切換圖片並隱藏顯示內容(2種方法實作)_jquery

我們的電腦螢幕大小是固定的，那麼如何在有限的空間中放更多的內容呢？
我們應該給使用者足夠的選擇權，當他們想要看某些內容的時候可以很快的看到，不想看的時候就把他隱藏。於是就有了題目說的這個問題。

其實這個問題很簡單，那麼，之所以拿出來跟大家分享，一方面我們大家互相交流，另一方面，也是對自己的學習的一種總結。

這裡我想到了兩種方法，跟大家分享一下。
好了不多說，下面看程式碼：

第一種，是常規的方法：
[javascript]

複製程式碼 程式碼如下:

$(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");
}
});
})

這裡主要是給圖片控制項註冊點擊事件，點擊的時候加入CSS控制(css主要設定是否顯示某部分內容)，同時更換圖片。

第二種方法：使用arguments.callee.em ^= 1自動選擇陣列參數
[javascript]

複製程式碼 程式碼如下:

functionchangeimg() {
//換圖片
var images = ['images/up.png', 'images/down.png']
var imgupdown =document.getElementById("hideimg");
imgupdown.src = images[arguments.callee.em^= 1];
//隱藏下方的div
var content =$(".hidecontent");
//根據display屬性判斷該進行的操作
if (content.css("display")!= "none") {
content.slideUp("slow");
} else {
content.slideDown("slow"); ;
}
}
functionchangeimg() {
//換圖片
var images = ['images/up.png','images/down.png']
var imgupdown =document.getElementById("hideimg");
imgupdown.src = images[arguments. callee.em^= 1];
//隱藏下方的div
var content =$(".hidecontent");
//根據display屬性判斷該進行的操作
if (content .css("display")!= "none") {
content.slideUp("slow");
} else {
content.slideDown("slow"); ;
}
}

這裡將圖片位址放到了一個陣列中，異或運算，自動選擇陣列參數，實現圖片的切換。
內容的隱藏顯示，則使用了.css屬性。
下面是效果圖：（待補充）