如何使此切换 javascript 按钮（图像）不那么笨拙？答案

【问题标题】：How can I make this toggle javascript buttons (images) less clumsy?如何使此切换 javascript 按钮（图像）不那么笨拙？
【发布时间】：2012-04-23 04:54:55
【问题描述】：

我正在寻找是否有办法让这段代码不那么笨拙？我认为必须有一种更优雅的方式来制作 2 个按钮，这些按钮可以在悬停和单击时在 2 个或更多按钮状态之间切换。

谢谢！

    <!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>

【问题讨论】：

标签： javascript button toggle

【解决方案1】：

这听起来非常适合使用 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;
}

【讨论】：

将此与toggle-event结合以打开和关闭
@mplungjan 除非我遗漏了什么，否则无需添加toggle()，toggleClass() 将在每次点击时切换样式并将图像转换为所需的外观。
假设用户只想改变外观，但如果它是从购物篮中添加和删除，那么我认为需要更多
@mplungjan，啊，我明白你的意思了。我想会有一个 ajax 调用来更新购物车（不包含在 OP 代码中）。

【解决方案2】：

使用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

【讨论】：

【解决方案3】：

使用 CSS 选择器 - 就像这里记录的那样： http://www.w3schools.com/cssref/sel_hover.asp

【讨论】：

请阅读此内容w3fools.com - 更好的资源：@987654323@

【解决方案4】：

如果你的意思是更时尚，可以通过 css 或 jquery 实现

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

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

【讨论】：

【解决方案5】：

看起来不错。我可以想到一个更优雅的方式，使用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>

代码因此可以轻松扩展——您可以使用适当的类/属性在任意位置添加新的imgs，而不必担心添加新的 JS。

【讨论】：

如果您采取将备用图像存储在标记中的方法，请不要编造虚假属性，而应使用兼容的data- 属性（data-toggleon）
@steveax：啊，是的（这里是 HTML5/jQuery 新手）。我以前见过。谢谢！
更不用说 toggle-event 很可能是为了处理此类问题而创建的
@mplungjan：这违背了我的代码的要点——然后你必须为每个元素使用一个新的 JS sn-p。我更喜欢将 JS 和 HTML 分开。当然，lambdas 将是绕过这一点的一种方法。
看我的回答。 html中只定义了一个事件，完全没有JS