jquery - JQuery替换属性源不起作用

Question

我有一个名为“on”（on.png）的按钮和一个名为“off”（off.png）的按钮。它们被设计用作开/关开关，所以当点击时，另一个应该加载。由于我不想处理路径（两者都相同），我正在尝试进行属性替换。然而，下面的 jQuery 代码什么也没做，我找不到错误。任何帮助表示赞赏。

$('#btnDining').css({'cursor':'pointer'}).on('click', function(e){
   var src = $(this).attr('src');
   $(this).attr('src', function(i, src){
      return (src.indexOf('off.png')!=-1)?src.replace("_off","_on"):src.replace("_on","_off");
   });
}); // end button click

Answer 1

你可以这样做：

$('#btnDining').css({'cursor':'pointer'}).on('click', function(e){
   var src = $(this).attr('src');
   src = (src.indexOf('off.png')!=-1)?src.replace("_off","_on"):src.replace("_on","_off");

   $(this).attr('src', src);
});

而且我认为，这是一种更具可读性的方式..

Answer 2

你把事情复杂化了。尝试这样的事情：

$('#btnDining').css('cursor','pointer').on('click', function(e){
   this.src = /_off/.test(this.src) ? 
        this.src.replace("_off","_on") : 
        this.src.replace("_on","_off");
}); // end button click

此外，请考虑使用 CSS 背景图像，因为如果您只是切换类并交换背景图像，您将拥有更有效和更简洁的代码。

Answer 3

您src在外部函数的函数范围内定义，然后在内部函数范围内重新定义它。

$('#btnDining').css({'cursor':'pointer'}).on('click', function(e){
   var src = $(this).attr('src');
   $(this).attr('src', function(i, source){
      return (src.indexOf('off.png')!=-1)?src.replace("_off","_on"):src.replace("_on","_off");
   });
}); // end button click

我不确定哪个src是哪个。但是，更改 attr 函数中的函数变量名称应该可以解决您的问题。