javascript - jQuery点击添加到图像的src

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-。

顺便说一句，如果您更喜欢使用 jQueryattr()方法，则不必调用两次相同的方法，只需使用匿名函数即可：

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

参考：

• attr().
• 属性以 ( [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'));
});

演示

Answer 5

首先为图像添加一个类：

<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 6

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

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

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;
 });
});

例子