我该如何使这个切换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按钮（图像）不那么笨拙？

回答

相关问题