JS 代码运行不正确，但可以在控制台上运行

Question

我正在尝试更改图像的 src。我可以在控制台上更改它，但无法在我的 javascript 文件中使用它。我的代码运行和我档案里的代码是一样的
这是我的代码的摘录，它给我带来了问题：

$(document).ready(function(){
    $(document).on("click", ".grid-zonaAzul div img", function(event){
        if ($(event.target).attr("src") != "imagens/reservaCadeiras/cadeiraIndisponivel1.png") {
            if ($(event.target).attr("src") == "imagens/reservaCadeiras/cadeiraSelecionadaChapeu1.png") {
                var parentClass = $(event.target).parent().attr("class");
                var classDots = "." + parentClass.split(" ").join(".");
                console.log(classDots);
                document.querySelector(classDots + " > img");
                // document.querySelector(classDots + " > img").setAttribute("src", "imagens/reservaCadeiras/cadeira1.png");
            };
        };
    });
});

在 HTML 上有这样的内容：

<div class="grid-zonaAzul">
    <div class="linha1a coluna1a"><img src="imagens/reservaCadeiras/cadeira1.png"></div>
</div>

var parentClass 给了我 class linha1a coluna1a，这是正确的。但是因为我需要带点，所以我运行宁线 var classDots = "." + parentClass.split(" ").join("."); 将字符串变成 .linha1a.coluna1a。此外，console.log
所以基本上我试图在 de class .linha1a.coluna1a 中获取唯一的图像。问题从这里开始，因为注释行没有做任何事情，但如果我运行 document.querySelector(".linha1a.coluna1a > img").setAttribute("src", "imagens/reservaCadeiras/cadeira1.png")，它在控制台上工作。

编辑： 对不起，我没有解释一些事情。我有一张图片，当我点击它时它会变成另一张图片。这工作正常。我发布的代码是运行ning 当我再次单击该图像以将第二个图像替换为它显示的第一个图像时。本质上，第一次单击将 src 更改为 imagens/reservaCadeiras/cadeiraSelecionada1.png，第二次单击更改为 imagens/reservaCadeiras/cadeira1.png.

Answer 1

如果您打算在每次点击时将 Image1 更改为 Image2，然后从 Image2 更改为 Image3，那么您的条件块不满足您的意图。

应该是这样的...

$(document).ready(function(){
    $(document).on("click", ".grid-zonaAzul div img", function(event){
        if ($(event.target).attr("src") == "Image1.png") {
            $(event.target).attr("src","Image2.png");
        };
         else if ($(event.target).attr("src") == "Image2.png") {
            $(event.target).attr("src","Image3.png");
        };
         else if ($(event.target).attr("src") == "Image3.png") {
            $(event.target).attr("src","Image1.png");
        };
    });
});

Answer 2

我找到问题了，这是一个愚蠢的错误。我从没想过问题出在第一个 if 以外的其他地方。我的代码是这样的：

$(document).ready(function(){
    $(document).on("click", ".grid-zonaAzul div img", function(event){
        if ($(event.target).attr("src") != "imagens/reservaCadeiras/cadeiraIndisponivel1.png") {
            if ($(event.target).attr("src") == "imagens/reservaCadeiras/cadeiraSelecionada1.png") {
                $(event.target).attr("src","imagens/reservaCadeiras/cadeira1.png");
            }
            if ($(event.target).attr("src") == "imagens/reservaCadeiras/cadeiraSelecionadaChapeu1.png") {
                var parentClass = $(event.target).parent().attr("class");
                var classs = "." + parentClass.split(" ").join(".");
                console.log(classs);
                document.querySelector(classs + " > img")
                // .setAttribute("src", "imagens/reservaCadeiras/cadeira1.png");
                // $(event.target).attr("src","imagens/reservaCadeiras/cadeira1.png");
            }
            if ($(".w3-select").val() == "sim") {
                $(event.target).attr("src","imagens/reservaCadeiras/cadeiraSelecionadaChapeu1.png");
            }
            else {
            $(event.target).attr("src","imagens/reservaCadeiras/cadeiraSelecionada1.png");
            }
        }
    });
});

问题是它在第二个 if 进入，然后在第三个 if 进入。使用 else if.

很容易纠正这个问题

解决方案：

$(document).ready(function(){
    $(document).on("click", ".grid-zonaAzul div img", function(event){
        if ($(event.target).attr("src") != "imagens/reservaCadeiras/cadeiraIndisponivel1.png") {
            if ($(event.target).attr("src") == "imagens/reservaCadeiras/cadeiraSelecionada1.png") {
                $(event.target).attr("src","imagens/reservaCadeiras/cadeira1.png");
            }
            else if ($(event.target).attr("src") == "imagens/reservaCadeiras/cadeiraSelecionadaChapeu1.png") {
                $(event.target).attr("src","imagens/reservaCadeiras/cadeira1.png");
            }
            else if ($(".w3-select").val() == "sim") {
                $(event.target).attr("src","imagens/reservaCadeiras/cadeiraSelecionadaChapeu1.png");
            }
            else {
                $(event.target).attr("src","imagens/reservaCadeiras/cadeiraSelecionada1.png");
            }
        }
    });
});

JS 代码运行不正确，但可以在控制台上运行

JS code not running correctly, but works on console

javascript

console

jquery

queryselector

JS 代码 运行 不正确，但可以在控制台上运行

JS code not running correctly, but works on console

javascript

console

jquery

queryselector

JS 代码运行不正确，但可以在控制台上运行