Question

我正在使用javascript文件进行一些按钮显示。当用户点击按钮时，当前按钮的图像被另一个图像替换（从而产生一个新按钮代替旧按钮的效果）和反之亦然。我创建了一个带有id ='imgbutton'的<img>元素，并使用元素attr('src',newimage)来显示这些按钮。

我将javascript文件放在{{MEDIA_URL}}/js目录中，以便可以使用

将文件添加到模板中

<script type="text/javascript"  src="{{MEDIA_URL}}/js/myscript.js" ></script>

在javascript代码（jquery 1.7.1）中，我正在设置像这样的图像

..
var btnimg=$('#imgbutton');
btnimg.attr('src','{{MEDIA_URL}}/img/NewImage.png');

这导致javascript控制台中出现404 error并显示占位符而不是图像。在django模板中，{{MEDIA_URL}}/img/OldImage.png被正确显示..只有在问题发生的javascript中。有人帮我弄清楚为什么会发生这种情况？我该怎么纠正这个？

Answer 1

你的问题是Django的模板引擎没有处理JS文件。当我需要这样做时，我通常会在页面中直接放置一小部分JS来设置变量值，然后由加载了<link>标记的JS文件引用。

<强>更新

是的，你想做这样的事情：

<script>
// first set the value you will be using.
var MEDIA_URL = "{{MEDIA_URL}}"; // and anything else you need to set
</script>

<script type="text/javascript"  src="{{MEDIA_URL}}/js/myscript.js" ></script>

现在，您可以在 JS文件中引用全局值，例如：

btnimg.attr('src',MEDIA_URL+'/img/NewImage.png');

如果有很多这样的东西，一个包含所有这些东西的数组或对象可以使你的命名空间保持整洁。

如何将图像位置放在django模板中的javascript代码中

1 个答案: