2012-03-20 104 views
0

嗨,大家好我目前正在設計一個按鈕,當用戶將鼠標懸停在另一個圖像上時,該按鈕會變爲另一個圖像。jQuery單擊效果

$(document).ready(function(){ 
    $(".button").hover(function() { 
     $(this).attr("src","button-hover.png"); 
    }, function() { 
     $(this).attr("src","button.png"); 
    }); 
}); 

我只是想知道我將如何添加第三個「點擊」功能,即當圖像用戶點擊它改變到另一個圖像。提前致謝。

+3

也綁定到'click'事件? – 2012-03-20 19:51:44

+0

'$(document).ready(function(){''可以被寫入'$(function(){' – asawyer 2012-03-20 19:52:31

回答

4
$(function(){ 
    $(".button").hover(function() { 
     $(this).attr("src","button-hover.png"); 
      }, function() { 
     $(this).attr("src","button.png"); 
    }).click(function() { 
     $(this).attr("src","button-click.png"); 
    }); 
}); 

假設你想讓按鈕在點擊時改變圖像,就像你在懸停時一樣。另外假設您有一個名爲button-click.png的文件。

+1

)因爲'hover'可以鏈接,所以不需要重用'.button'選擇器,就像大多數jQuery方法 – 2012-03-20 19:57:32

+0

Chaining。還沒有養成使用它的習慣,編輯修復這個問題,謝謝 – 2012-03-20 19:59:12

+0

沒問題,養成這樣的習慣是件好事,效率更高,特別是當你使用更復雜的選擇器另一種方法是將選擇器的結果存儲在一個變量中並且每次都重複使用+1。 – 2012-03-20 20:00:03

0

沒問題。這是你的代碼加入我的。 。

$(document).ready(function(){ 
    $(".button").hover(function() { 
     $(this).attr("src","button-hover.png"); 
    }, function() { 
     $(this).attr("src","button.png"); 
    }); 

    //added click function below 
    $(".button").click(function() { 
     //do click actions here 
    }); 
}); 
0

$( 'div.search')點擊( 函數(){ 返回FALSE; //取決於你返回true或false事件被傳播 } );