Question

我一直试图创建一个用户点击图片的效果，该图像被另一个图像替换，该图像也充当链接。

但问题是，无论何时点击替换后的图片，链接都无效。

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

Answer 1

img个标签没有href个属性。您需要将图像包装在锚点中并将URL指定给它，或者执行自定义重定向。

在检查元素时注意你的图像html：

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

这不是有效的，因为imgs不是主播！

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

（我试图制作一个小提琴，但它不会保存，但这应该有效）

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

Answer 2

这是一个例子。

example

html部分

<img src="http://i.imgur.com/o46X87d.png" data-new="http://i.imgur.com/9lf2Mjk.png" id="1" class="btnClick" />

使用新的图片网址在图片上添加data-new属性并用js替换它

$('.btnClick').on('click',function(){
    var url = $(this).attr("data-new");

    $(this).attr("src", url);
});

Answer 3

我会使用一种完全不同的方法，但这里有如何使用您已有的代码执行此操作：

<div class="btnClick">
<img src="http://i.imgur.com/o46X87d.png" id="1" />
<a href="javascript:check()" id="2" style="display:none;">
    <img src="http://i.imgur.com/9lf2Mjk.png" id="static" />
</a>
</div>

<script type="text/javascript">
$('.btnClick').on('click',function(){
    if($('#1').is(':visible')) {
        $('#1').hide();
        $('#2').show();
    } else {
        $('#1').show();
        $('#2').hide();
    }
});
</script>

我故意不使用toggle()来更好地展示该技术，以防您在点击图片出现时想要关闭点击事件等。

链接无法处理图像？

3 个答案: