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

Question

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

单击图像时，图像的大小会增加，但 id 然后喜欢在图像源之前添加一个目录，这样它就会变成不同的图像。

jQuery可以做到这一点吗？

目前

<img src="image.jpg" />

我想要的是

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

我已经阅读了有关使用“数据源”标签的信息，但我似乎无法正常工作？

试过了

$('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/和 not之间切换hires/，请删除字符串（如果存在）：

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

---

.prepend是一种添加 DOM 元素的 jQuery 方法。它不是本机字符串方法。那里的大括号也是错误的（语法错误）。

Answer 2

你可以这样做，

现场演示

$('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'));