javascript - 链接不适用于图像?

标签 javascript jquery html css

我一直在尝试创建一种效果,即用户点击图片时,该图片会被另一张图片取代,该图片也充当链接。

但是我的问题是,每当我单击替换的图像时,链接都不起作用。

fiddle :http://jsfiddle.net/ha6qp7w4/321/

$('.btnClick').on('click',function(){
    $(this).attr('src','https://placekitten.com/g/200/300')
    $(this).attr('href','google.com')
});

最佳答案

img 标签没有 href 属性。您需要将图像包裹在 anchor 中并将 url 分配给它,或者进行自定义重定向。

注意检查元素时的图像 html:

<img src="https://placekitten.com/g/200/300" id="1" class="btnClick" href="google.com"> <!-- not valid! -->

这是无效的,因为 imgs 不是 anchor !

function first() {
    this.src = 'https://placekitten.com/g/200/300';
    $(this).unbind("click");
    $(this).on("click", second);
}

function second() {
    window.location.href = "https://www.google.com";
    $(this).unbind("click");
    $(this).on("click", first);
}

$('.btnClick').on('click', first);

(我试图制作一个 fiddle ,但它不会保存,但这应该可以)

您需要将操作存储在函数中,以便在需要时可以恢复。第一个操作是更改源,然后更改事件以像链接一样重定向您。

关于javascript - 链接不适用于图像?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29392502/

相关文章:

javascript - 嵌套 AJAX 回调函数的可读性

javascript - Javascript For 循环问题

javascript - 如何检查 on{x} 中的 "device.calendar.ongoing"中的内容?

javascript - jQuery 自定义确认

javascript - elevatezoom 上带有悬停选择器的图库图像

javascript - 如何创建 Dropbox 托管应用程序

javascript - 提交后显示图片URL

jquery - 关于 jQuery 的 .click() 的一般问题

javascript - polymer 纸图标按钮不会触发点击

html - 如何在html中并排对齐图像?