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

您在外部函数的函数范围中定义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函数中的函数变量名称可以解决您的问题。

Answer 3

你的事情过于复杂。尝试这样的事情：

$('#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背景图像，因为如果只是简单地切换类和交换背景图像，您将获得更有效和更清晰的代码。

JQuery替换属性源不起作用

3 个答案: