Fatal编程技术网
  • javascript/
  • 我怎样才能使切换javascript按钮（图像）不那么笨拙？

我怎样才能使切换javascript按钮（图像）不那么笨拙？

javascript button

我怎样才能使切换javascript按钮（图像）不那么笨拙？,javascript,button,toggle,Javascript,Button,Toggle,我想看看是否有办法让这段代码不那么笨拙？我认为一定有一种更优雅的方法来制作两个按钮，在悬停和单击时在两个或更多按钮状态之间切换 谢谢 <!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"&

我想看看是否有办法让这段代码不那么笨拙？我认为一定有一种更优雅的方法来制作两个按钮，在悬停和单击时在两个或更多按钮状态之间切换

谢谢

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


img1=“images/buy1.png”；
img2=“images/buy2.png”；
函数chng（c_img）{
如果（c_img.src.indexOf（img1）！=1）c_img.src=img2；
否则c_img.src=img1；
}  
img3=“images/sell1.png”；
img4=“images/sell2.png”；
函数chng2（c_img）{
如果（c_img.src.indexOf（img3）！=1）c_img.src=img4；
否则c_img.src=img3；
}
使用CSS选择器-如此处所述：

如果你的意思是更时尚，那么css或jquery就有办法了

看起来不错。我可以想出一种更优雅的方式，使用：

首先，为每个元素指定
toggleImg
类。然后，为每个按钮提供属性
数据切换打开
和
数据切换关闭
。如果需要，请删除
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>


$（文档）.ready（函数（）{
$（“.toggleImg”）。在（'click'，function（）上{
if（$（this.attr（'src'）==$（this.data（'toggleon'））{
$（this.attr（'src'，$（this.data（'toggleoff'））
}否则{
$（this.attr（'src'，$（this.data（'toggleon'））
}
});
});
因此，代码可以很容易地扩展——您可以使用appropirate类/属性在任何地方添加新的
img
s，而不用担心使用

注意

代码将处理任何链接和图像，其中链接和图像的ID具有某种匹配-可以与
数据进行匹配，但也与非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>




变量图标={
购买：{
关于：http://ev9.evenue.net/evenue/linkID=global-fargo/images/buy tickets.png“，
关：“http://ev8.evenue.net/evenue/linkID=global-sandler/images/buyTickets.png“
},
出售：{
关于：http://ev9.evenue.net/evenue/linkID=global-fargo/images/buy tickets.png“，
关：“http://ev8.evenue.net/evenue/linkID=global-sandler/images/buyTickets.png“
}
} 
$（文档）.ready（函数（）{
$（“.toggleLink”）.toggle(
函数（）{
var id=$（this.attr（“id”）；
$（“#”+id+“Img”）.attr（“src”，icons[id].on）；
//或者更改链接的类名
//或者使用数据切换-但无需测试图像src
},
函数（）{
var id=$（this.attr（“id”）；
$（“#”+id+“Img”）.attr（“src”，图标[id].off）；
}
);
});


更新使用数据属性证明某一点


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




$（文档）.ready（函数（）{
$（“.toggleLink”）.toggle(
函数（）{
var img=$（this.find（“img”）；
img.attr（“src”，img.data（“toggleon”）；
},
函数（）{
var img=$（this.find（“img”）；
img.attr（“src”，img.data（“toggleoff”）；
}
);
});


PS：看看这里有一个很棒的版本


这听起来非常适合使用CSS背景精灵。创建包含两种状态的图像，垂直堆叠：


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


为链接提供一个类，并使用属性（使用下面的简写符号）将图像应用于元素：






.buy1{
显示：块；
宽度：115px；
高度：50px；
背景：透明url（images/buy1.png）左下角无重复；
}
.buy1.on{背景位置：左上；}


然后使用JavaScript，您可以简单地切换类：


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


这种方法有许多优点：


    

  • 更少的服务器请求（您可以将所有图像合并到一个精灵中
表，它们将在一个请求中加载）意味着更好的性能
    • 

  • 悬停时不会出现延迟，因为“打开”状态已加载
    • 

  • 更容易维护
    • 


编辑我想补充一点，你应该在链接中加入一些真实的内容，让屏幕阅读器用户可以浏览。我通常会使用图像替换技术：


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



如果您采取在标记中存储备用图像的方法，不要伪造属性，而是使用兼容的
data-
属性（
data-toggleon
）@steveax:Aah-yes（这里是HTML5/jQuery新手）。我以前见过。谢谢更不用说可能是为了在第一时间处理此类问题而创建的place@mplungjan：这违背了我代码的要点——然后你必须为每个元素使用一个新的JS代码段。我更喜欢将JS和HTML分开。当然，lambdas是一种绕过这一点的方法。请看我的答案。只定义了一个事件，html中根本没有JS。请阅读这篇文章——更好的参考资料：将它与切换事件结合起来，以打开和关闭off@mplungjan除非我遗漏了什么，否则没有必要添加
toggle（）
，
toggleClass（）
将在每次单击时切换样式，并将图像切换到所需的外观。假设用户只想更改外观，但如果是从购物篮中添加和删除，则我的opinion@mplungjan啊，我明白你的意思了。我估计会有一个ajax调用来更新购物车（操作代码中没有包含）。