Question

比如说我有两个叫做的图像： -

<img alt="img-estate" src="images/estate.png" />

<img alt="img-saloon" src="images/saloon.png" />

点击其中一张图片后，我希望能够更改src以在点击时添加-active。

因此，如果我点击＃img-estate，图像src应为images/estate-active.png。所以基本上它会读取原始的src位置，并在点击时添加-active。

我将如何使用jQuery进行此操作？

Answer 1

点击后，以下内容将有效切换 -active字符串：

$('img').click(function(){
    var src = this.src;
    this.src = src.indexOf('-active') == -1 ? src.replace('.png','-active.png') : src.replace('-active.png','.png');
});

如果您只是添加该字符串：

$('img').click(function(){
    var src = this.src;
    this.src = src.replace('.png','-active.png');
});

要将此选项仅应用于问题中列出的元素，您可以将选择器修改为：

$('img[alt^="img-"]')

仅选择alt属性以字符串img-开头的图像。

顺便提一下，如果您更喜欢使用jQuery attr()方法，则不必再调用两次相同的方法，只需使用匿名函数：

$('img[alt^="img-"]').attr('src', function(index, currentSrc){
    return currentSrc.replace('.png', '-active.png');
});

参考文献：

attr()。
attribute-starts-with ([attribute^="value"])。
click()。
String.replace()。

Answer 2

$('img').click(function() {
  var $this = $(this);
  $this.attr('src', $this.attr('src').replace(/\.png$/, '-active.png'));
});

Answer 3

试试这个：

$('img').click(function(){
   var src = $(this).attr('src');
   src = src.substring(0, src.length-4);
   $(this).attr('src', src+'-active.png');
});

Answer 4

这样的事可能会成功

$('img').on('click', function() {
   var $img = $(this);
   var currentSrc = $img.prop('src');
   $img.prop('src', currentSrc.replace('.png','-active.png'));
});

DEMO

Answer 5

此功能应该可以完美运行：

$('img').click(function(){
    $(this).attr('src', $(this).attr('src').replace(/\.png/, '-active.png'));
}

Answer 6

首先在图像中添加一个类：

<img alt="img-estate" class="clickable_image" src="images/estate.png" />

$('.clickable_image).on('click, function(e){

      var source = $(e.target).attr('src').Split('.');
      $(e.target).attr('src','source[0] + '-active' + source[1]);



});

Answer 7

$(function() {
 $('img').click(function(){
 var image =  $(this).attr('src');
 alert(image);
 var newimage = image.replace('.png','-active.png');
 alert(newimage);

 $(this).attr('src',"newimage");
 return false;
 });
});

example

单击jQuery添加到图像的src

7 个答案: