Javascript 使用jQuery将目录前置到映像源

我的网站上有5行，每行都有一张图片

单击后，图像的大小会增加，但我希望在图像源之前添加一个目录，使其成为不同的图像

使用jQuery可以做到这一点吗

当前

<img src="image.jpg" />

---

你可以这样做

$('img').click(function(){
    $(this).attr('src', function(i, value) {
        return 'hires/' + value;
    });   
});

---

这就是你要找的吗

$('img').click(function(){
    $(this).attr('src', function(i, value) {
        return 'hires/' + value;
    });
});

不过，每次点击都会预发

hires/

。您可以使用

.indexOf

测试它是否已经存在：

$(this).attr('src', function(i, value) {
    return value.indexOf('hires/') === -1 ?  'hires/' + value : value;
});

如果要在

hires/

和非

hires/

之间切换，请删除字符串（如果存在）：

$(this).attr('src', function(i, value) {
    return value.indexOf('hires/') === -1 ?  
        'hires/' + value : 
        value.replace('hires/', '');
});

---

.prepend

是一种用于添加DOM元素的jQuery方法。它不是本机字符串方法。另外，花括号是错误的（语法错误）

上面这一行有几处错误

{'src'}

是一种

语法错误

。在JavaScript中，大括号用于创建新对象（或新代码块）。 对象由键值对组成，例如

var obj = { aKey: 42 };
obj.aKey // 42

更新。 自ES2015以来，如果存在与键同名的变量，并且可以在创建对象的范围内访问该变量，则可以省略该值

var aKey = 42;
var obj = { aKey }; // Note, there're no quotes
obj.aKey // 42

根据接收到的参数，作为getter和setter工作。 您可能希望将其用作

$（this）.attr（'src'）

，以获取当前的

src

属性，以及

$（this）.attr（'src'，'something'）

以更新它

不适用于字符串。它用于将内容插入到每个匹配元素的开头

最后，这是实现目标的正确方法：

$(this).attr('src', 'hires/' + $(this).attr('src'));

这应该做到：

$('img').click(function(){
    var imgSRC = $(this).attr('src');
    $(this).attr('src', 'hires/' + imgSRC);
  });

---

也可以只使用one（）来附加事件一次。谢谢@FelixKling，假设您有

，并且有背景图像，是否可以将其添加到背景图像中@利亚姆：看我对阿迪尔回答的评论；）@Liam这是可能的，但这和你最初问的完全不同，这里有可以接受的答案。如果你有一个不同的问题，那么你应该创建一个新的问题。太棒了，谢谢@FelixKling，如果我想取消“雇佣关系”怎么样？类似吗？这可能不起作用。。。我不确定，但我认为

.src

将包含完整的URL。谢谢@Adil，假设您有

，并且有背景图像，是否可以将其添加到背景图像中？@Liam：编辑CSS可能有不同程度的困难（取决于它是内联的还是规则）.我希望我不是，因为我更喜欢房产；）不过，您可以始终使用

.getAttribute

。

var aKey = 42;
var obj = { aKey }; // Note, there're no quotes
obj.aKey // 42

$(this).attr('src', 'hires/' + $(this).attr('src'));

$(this).attr('src', "hires/" + $(this).attr('src'));

$('img').click(function(){
    var imgSRC = $(this).attr('src');
    $(this).attr('src', 'hires/' + imgSRC);
  });