Question

对于模糊的标题感到抱歉，但我不确定如何描述它。

我想要做的是点击，更改图像。这是代码的一部分。

有人可以告诉我这是否可行？我没有办法做到这一点，因为我不确定如何引用锚标签。

$(document.createElement('a'))
  .attr('href', '#')
  .html('<img src="myimage.jpg" />')
  .click( function( e ){
    // When the user clicks the anchor tag above, I want to replace the current
    // image (myimage.jpg) with another one.
  }

Answer 1

假设您想要保留其编写代码的状态（这很糟糕），e.currentTarget是对被单击元素的引用。您可以使用它来重复（不鼓励的）.html()程序与另一个图像URL。

$(document.createElement('a'))
    .attr('href', '#')
    .html('<img src="myimage.jpg" />')
    .click( function( e ){
        $(e.currentTarget).html('<img src="myimage2.jpg" />');
    });

Answer 2

最简单的方法就是给图像一个类，比如“myImg”，并使用.on()方法绑定到动态创建的元素

$(document).on('click', '.myImg', function(){
    //$(this) refers to the image that we clicked
    $(this).prop('src', 'http://my-domain.com/path/to/my/new-image.jpg');
});

这会将事件绑定到文档，只要单击类别为“myImg”的图像，它就会替换图像。

Answer 3

$(document.createElement('a'))
  .attr('href', '#')
  .html('<img src="myimage.jpg" />')
  .click( function( e ){
      $(this).find('img').attr('src','myNewImage.jpg');
  });
}

Answer 4

//create node
$('<a>', {
   'href': '#',
   'src': 'myimage.jpg'
})

//add it to the body
.appendTo('body')

//add envent
.on('click', function(){
   $(this).attr('src', 'otherimage.jpg');

   //prevent to jump to the top of the page caused by the '#'
   return false;
});

Answer 5

使用这个简单的

$('img').click(function () {
 $(this).attr('src', 'src/to/new/file.png');
}

如果要在a点击时更改图像。然后使用

$('a').click( function () {

而不是图像。

这将改变当前图像的src属性。

这是一个工作小提琴：）

http://jsfiddle.net/afzaal_ahmad_zeeshan/8H4MC/

当鼠标悬停在图像上时，您将会发生变化。您可以使用click代替hover。这应该工作。如果您必须使用a禁用href="#"，请不要创建cursor: pointer。

如果你想要一个指针光标在CSS中使用$(this).css('cursor', 'pointer');或使用

{{1}}

使用jQuery单击更改图像

5 个答案: