Question

所以我有我的HTML文件中包含的Javascript代码：

<script>
var checkbox = document.getElementById('checkbox');
var checkbox_1 = document.getElementById('checkbox_1');
var checkbox_2 = document.getElementById('checkbox_2');

var img_1 = "green.png";
var img_2 = "red.png";
var img_3 = "yellow.png";

checkbox.onclick = function () {
    if (checkbox.src == img_1) {
        checkbox.src = img_2;
    } else if (checkbox.src == img_2) {
        checkbox.src = img_3;
    } else if (checkbox.src == img_3) {
        checkbox.src = img_1;
    }
}
checkbox_1.onclick = function () {
    if (checkbox_1.src == img_1) {
        checkbox_1.src = img_2;
    } else if (checkbox_1.src == img_2) {
        checkbox_1.src = img_3;
    } else if (checkbox_1.src == img_3) {
        checkbox_1.src = img_1;
    }
}
checkbox_2.onclick = function () {
    if (checkbox_2.src == img_1) {
        checkbox_2.src = img_2;
    } else if (checkbox_2.src == img_2) {
        checkbox_2.src = img_3;
    } else if (checkbox_2.src == img_3) {
        checkbox_2.src = img_1;
    }
}
</script>

我想要做的是从文件而不是从URL加载图像。从URL，它工作正常，但从文件它没有。为什么会这样，我该如何解决？

Answer 1

这取决于这些图像文件的位置。如果这些图像与HTML文件位于同一目录中，则应该可以正常工作或

var img_1 = "./green.png";
var img_2 = "./red.png";
var img_3 = "./yellow.png";

否则，你应该说出他们的姓名。例如，如果您的Web目录结构如下，

.- index.html
 ㄴ img
     ㄴ green.png
     ㄴ red.png
     ㄴ yellow.png

然后您的图像变量应该像

var img_1 = "/img/green.png";
var img_2 = "/img/red.png";
var img_3 = "/img/yellow.png";

Answer 2

在我看来，这可能正在发生，因为你没有在html中设置src属性，如果你在Javascript中做什么，你应该做一些这样的添加（记住将图像放在与html相同的文件夹中：

checkbox.src = img_1;
checkbox_1.src = img_2;
checkbox_2.src = img_3;

但是如果你在更改已经存在的图片时遇到问题，因为当你给一个对象src属性它需要整个路径，例如＆＃34;。\ img.png＆＃34; =＆GT; ＆＃34; C：\用户\用户\文件\网站\ img.png＆＃34 ;. 所以尝试这样的事情：

if (checkbox.src.split("/")[checkbox.src.split("/").length - 1]) {

或者如果你想要更干净的东西：

var array_path = checkbox.src.split("/");
if(array_path[array_path.length - 1]){

在Javascript

2 个答案: