使用 jQuery 替换鼠标点击图像和 Django 不起作用答案

【问题标题】：Replace image on mouse click using jQuery and Django doesn't work使用 jQuery 替换鼠标点击图像和 Django 不起作用
【发布时间】：2020-12-27 18:36:26
【问题描述】：

我想在使用 jQuery 单击图像时替换它。这是我的代码。

HTML

{% load static %}
<div class="col-md-6 image">
    <img class="map" src="{% static 'home/map.png' %}" class="doctors">
</div>

jQuery

$(document).ready(function() {
    $('.map').click(function() {
        $(this).attr("src", "{% static 'home/map2.png' %}");
    });
})

我尝试了上面的代码，但没有成功。图片的位置和图片格式已经是正确的，但是当我点击图片时它只显示一张空白图片（与我们写入错误图片格式时的显示相同）。

我已经尝试过把 jQuery 改成这个了

$('.map').click(function() {
    $(this).attr("src", "home/map2.png");
});

但它仍然没有工作。谁知道怎么解决？

【问题讨论】：

你能试着让你的代码这样运行吗？ jsfiddle.net/rabiee3/ftkuub3j 这有用吗？ stackoverflow.com/a/12784242/3825777
您好，当我使用在线图片的 url 更改源时，我的代码显然可以正常工作，谢谢您的回答！:)

标签： javascript html jquery django

【解决方案1】：

这是您在可运行堆栈-sn-p 中的解决方案。

$(document).ready(function() {
    $('.map').click(function() {
        var img2 = $(this).attr("data-img2");
        $(this).attr("src", img2);
    });
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-6 image">
       <img class="map" data-img2="https://homepages.cae.wisc.edu/~ece533/images/arctichare.png" src="https://homepages.cae.wisc.edu/~ece533/images/airplane.png"> 
</div>

【讨论】：

【解决方案2】：

使用类似的东西来避免 JS 错误以及流动代码

HTML

{% load static %}
<div class="col-md-6 image">
    <img class="map" data-img2="{% static 'home/map2.png' %}" src="{% static 'home/map.png' %}" class="doctors">
</div>

jQuery

$(document).ready(function() {
    $('.map').click(function() {
        var img2 = $(this).attr("data-img2");
        $(this).attr("src", img2 );
    });
});

【讨论】：

感谢发布。我使用示例图像和一个可运行的 sn-p 来轻松直观地展示它的工作原理。