我該如何使這個切換javascript按鈕（圖像）不那麼笨拙？

我期待看看是否有辦法讓代碼變得笨拙？我認爲必須有一種更優雅的方式來製作2個按鈕，在懸停和點擊之間切換2個或更多按鈕狀態。我該如何使這個切換javascript按鈕（圖像）不那麼笨拙？

謝謝！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <link type="text/css" rel="stylesheet" href="style.css" /> 
    <script type="text/javascript"> 

    img1 = "images/buy1.png"; 
    img2 = "images/buy2.png"; 
    function chng(c_img) { 
    if (c_img.src.indexOf(img1)!= -1) c_img.src = img2; 
    else c_img.src = img1; 
    } 
    img3 = "images/sell1.png"; 
    img4 = "images/sell2.png"; 
    function chng2(c_img) { 
    if (c_img.src.indexOf(img3)!= -1) c_img.src = img4; 
    else c_img.src = img3; 
    } 
    </script> 

    <title></title> 
</head> 

<body> 
    <div class="container"> 
    <div id="sell"> 
     <a href="#"><img src="images/buy1.png" onclick="chng(this)" name="img" width="115" 
     border="0" height="50" id="img" /></a> 
    </div><a href="#"><img src="images/sell1.png" onclick="chng2(this)" name="img2" 
    width="115" border="0" height="50" id="img2" /></a> 
    </div> 
</body> 
</html>

來源

2012-04-23 WoJo

這聽起來像一個非常適合使用CSS背景精靈。創建具有在其中兩個州的圖像，垂直堆疊：

---------------------- 
|  "on" image | 
---------------------- 
---------------------- 
|  "off" image | 
----------------------

給您的鏈接類和使用background-image屬性（使用下面的速記符號）的圖像應用到他們的元素：

<a href="#" class="buy1"></a>

.buy1 { 
    display: block; 
    width: 115px; 
    height: 50px; 
    background: transparent url(images/buy1.png) left bottom no-repeat; 
} 

.buy1.on { background-position: left top; }

然後使用JavaScript，你可以簡單地切換類：

$(document).ready(function(){ 
    $("#sell a").on('click',function(){ 
     $(this).toggleClass('on'); 
    }); 
});

這種方法具有許多優點：

更少的服務器請求（你可以將所有圖像組合成一個精靈片，他們將在一個請求負載），意味着更好的性能
將有上沒有滯後懸停的「上」已經加載狀態
更容易維護

編輯我想補充，你應該把在鏈接一些真正的內容給讀屏軟件用戶的東西使用導航。我通常會用一個圖像替換技術爲：

<a href="#" class="buy1"><span>Buy Now</span></a>

.buy1 span { 
    position: absolute; 
    display: block; 
    top: -10000px; 
    left: -10000px; 
    font-size: 1px; 
}

來源

2012-04-23 06:07:04 steveax

這一切再加觸發事件來開啓和關閉 – mplungjan 2012-04-23 06:41:12

@mplungjan除非我失去了一些東西，就沒有必要添加'切換（）'，'toggleClass（）'將切換每次點擊的造型和將圖像轉移到所需的外觀。 – steveax 2012-04-23 16:08:41

假設用戶只想改變外觀，但如果它是一個添加和從購物籃中刪除，那麼我認爲需要多一點 – mplungjan 2012-04-23 16:18:20

使用CSS選擇器 - 像什麼記錄在這裏： http://www.w3schools.com/cssref/sel_hover.asp

來源

2012-04-23 05:07:37 JRaymond

請仔細閱讀本太http://w3fools.com/ - 更好的資源：[怪異模式]（http://www.quirksmode.org /css/hover.html） – mplungjan 2012-04-23 05:38:44

，如果你的意思是更時尚有辦法通過CSS或jQuery的

http://www.webreference.com/programming/css_stylish/index.html

http://speckyboy.com/2009/05/27/22-css-button-styling-tutorials-and-techniques/

來源

2012-04-23 05:07:41 shareef

它看起來很好。我可以想到一個更優雅的方式，使用jQuery：

首先，給你的元素的每一個toggleImg類。然後，給每個按鈕的屬性data-toggleon和data-toggleoff。如果您願意，可以刪除id和name。

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <link type="text/css" rel="stylesheet" href="style.css" /> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
    <script type="text/javascript"> 
    $(document).ready(function(){ 
    $(".toggleImg").on('click',function(){ 
     if($(this).attr('src')==$(this).data('toggleon')){ 
     $(this).attr('src',$(this).data('toggleoff')) 
     }else{ 
     $(this).attr('src',$(this).data('toggleon')) 
     } 
    }); 

    }); 
    </script> 

    <title></title> 
</head> 

<body> 
    <div class="container"> 
    <div id="sell"> 
     <a href="#"><img src="images/buy1.png" class=toggleImg data-toggleon="images/buy1.png" data-toggleoff="images/buy2.png" width="115" border="0" height="50" /></a> 
    </div><a href="#"><img src="images/sell1.png" class=toggleImg data-toggleon="images/sell1.png" data-toggleoff="images/sell2.png" width="115" border="0" height="50" /></a> 
    </div> 
</body> 
</html>

的代碼可以這樣輕鬆擴展 - 無論你想與appropirate類/屬性，你可以添加新的img秒且不擔心增加新的JS。

來源

2012-04-23 05:16:09 Manishearth

如果您採用在標記中存儲替代圖像的方法，請不要使用僞數據屬性，而要使用符合的'data-'屬性（'data-toggleon'） – steveax 2012-04-23 05:25:49

@steveax：是啊（HTML5/jQuery新手在這裏）。我以前見過。謝謝！ – Manishearth 2012-04-23 05:31:53

更不用說[toggle-event]（http://api.jquery.com/toggle-event/）很可能是爲了解決這類問題而設立的。 – mplungjan 2012-04-23 05:41:51

使用jQuery toggle-event

注意

的代碼將處理任何鏈接和圖片，其中的鏈接和圖像的ID具有某種匹配 - 與可行的data很好，但與非兼容html5瀏覽器。您必須爲每個不同的圖像提供圖像或類名，但切換腳本已修復。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <link type="text/css" rel="stylesheet" href="style.css" /> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
    <script type="text/javascript"> 

    var icons = { 
     buy:{ 
      on:"http://ev9.evenue.net/evenue/linkID=global-fargo/images/buy-tickets.png", 
     off:"http://ev8.evenue.net/evenue/linkID=global-sandler/images/buyTickets.png" 
     }, 
     sell:{ 
      on:"http://ev9.evenue.net/evenue/linkID=global-fargo/images/buy-tickets.png", 
     off:"http://ev8.evenue.net/evenue/linkID=global-sandler/images/buyTickets.png" 
     } 
    } 
    $(document).ready(function() { 
     $(".toggleLink").toggle(
      function() { 
      var id = $(this).attr("id"); 
      $("#"+id+"Img").attr("src",icons[id].on); 
      // OR change the className of the link 
      // OR use data-toggle - but no need to test the image src 
      }, 
      function() { 
      var id = $(this).attr("id"); 
      $("#"+id+"Img").attr("src",icons[id].off); 
      } 
     ); 
    }); 
    </script> 

    <title></title> 
</head> 

<body> 
    <div class="container"> 
    <div id="sell"> 
     <a href="#" id="buy" class="toggleLink"><img src="http://ev8.evenue.net/evenue/linkID=global-sandler/images/buyTickets.png" id="buyImg" width="115" 
     border="0" height="50" /></a> 
     <a href="#" id="sell" class="toggleLink"><img src="http://ev8.evenue.net/evenue/linkID=global-sandler/images/buyTickets.png" id="sellImg" width="115" 
     border="0" height="50" /></a> 
    </div> 
</body> 
</html>

UPDATE使用數據屬性來證明這一點

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <link type="text/css" rel="stylesheet" href="style.css" /> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
    <script type="text/javascript"> 

     $(document).ready(function() { 
     $(".toggleLink").toggle(
      function() { 
      var img = $(this).find("img"); 
      img.attr("src",img.data('toggleon')); 
      }, 
      function() { 
      var img = $(this).find("img"); 
      img.attr("src",img.data('toggleoff')); 
      } 
     ); 
    }); 
    </script> 

    <title></title> 
</head> 

<body> 
    <div class="container"> 
    <div id="buy"> 
     <a href="#" class="toggleLink"><img src="images/buy1.png" 
     data-toggleon="images/buy1.png" 
     data-toggleoff="images/buy2.png" 
     width="115" border="0" height="50" id="img" /></a> 
    </div> 
</body> 
</html>

PS：看看這裏爲一個偉大的版本

Element with hover then click removes hover effect and click again adds hover again與fiddle by Greg Pettit

來源

2012-04-23 06:04:12 mplungjan

我該如何使這個切換javascript按鈕（圖像）不那麼笨拙？

回答

相關問題