首頁  >  文章  >  web前端  >  Jquery實作點擊切換圖片並隱藏顯示內容(2種方法實作)_jquery

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

WBOY
WBOY原創
2016-05-16 17:37:291045瀏覽

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

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

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

第一種,是常規的方法
[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");
}
});
})
Jquery實作點擊切換圖片並隱藏顯示內容(2種方法實作)_jquery
$(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");
}
});
})
Jquery實作點擊切換圖片並隱藏顯示內容(2種方法實作)_jquery

這裡主要是給圖片控制項註冊點擊事件,點擊的時候加入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屬性。
下面是效果圖:(待補充)
陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn