Question

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

单击图像后，图像的大小会增加，但是id会将目录添加到图像源之前，这样它就会变成不同的图像。

这可以用jQuery吗？

目前

<img src="image.jpg" />

我想要什么

<img src="hires/image.jpg" />

我读过有关使用＆＃39;数据源＆＃39;标签，但我似乎无法得到任何工作？

试过

$('img').click(function(){
    $(this).attr({'src'}).prepend('hires');
});

Answer 1

这是你在找什么？

$('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方法。它不是本机字符串方法。那里的花括号也是错误的（语法错误）。

Answer 2

你可以这样做，

<强> Live Demo

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

Answer 3

$(this).attr({'src'}).prepend('hires');

上述内容存在一些问题。

{'src'}是SyntaxtError。在JavaScript中，花括号用于创建新对象（或新的代码块）。对象由键值对组成，例如

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

<强>更新从ES2015开始，如果存在具有相同名称的变量，则可以省略该值，并且可以在创建对象的范围内访问该值。

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

$.fn.attr既可以作为getter，也可以根据它收到的参数作为setter。您可能希望将其用作$(this).attr('src')来获取当前的src属性，并使用$(this).attr('src', 'something')来更新它。

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

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

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

Answer 4

这应该这样做：

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

Answer 5

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

使用jQuery将目录添加到图像源

5 个答案: