Question

我正在使用jQuery。我想在点击时更改图像文件的文件扩展名。并希望在另一次点击时再次将其更改回来。等等。

这是我现在所拥有的，但它不起作用。甚至没有第一次点击工作。我认为替换语法不是。

$(document).ready(function() {

    $('img#featured').on( 'click', function() {
        $(this).attr( 'src', replace( '.jpg', '.gif' ) );
    });

});

图像代码就是这个。

<img src="sample-image.jpg" id="featured" />

Answer 1

这应该完全按照你的意愿行事。

 $('img#featured').on('click', function() {
     var src = $(this).attr('src');
     if (src.indexOf(".jpg") > -1) {
         src = src.replace('.jpg','.gif' );
     } else {
         src = src.replace('.gif','.jpg' );
     }
     $(this).attr('src', src);
});

Answer 2

$(document).ready(function() {

$('img#featured').on( 'click', function() {
  var $t=$(this), txt =$t.attr('src');
  if (txt.indexOf('.jpg')>-1) {
    txt=txt.replace('.jpg','.png');
  } else {
    txt=txt.replace('.png','.jpg');
  }
  $t.attr( 'src', txt );

});

});

Answer 3

您可以将功能传递给.attr()。它接收属性的旧值作为参数，并且必须返回新值。

$('img#featured').on( 'click', function() {
    $(this).attr( 'src', function(i, oldsrc) {
        if (oldsrc.indexOf('.jpg') != -1) {
            return oldsrc.replace( '.jpg', '.gif' ) );
        } else {
            return oldsrc.replace( '.gif', '.jpg' ) );
        }
    });
});

您可以使用与其他方法类似的语法来设置DOM元素：.html()，.text()，.val()，.prop和.data()。第一个参数是集合中当前元素的索引（如果您对多个元素进行操作，这可能很有用），第二个参数是要替换的旧值。

Jquery点击更改图像文件扩展名

3 个答案: