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>

变量parentClass给我的类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")，它可以在控制台上工作。

编辑： 对不起，我没有解释什么。我有一个图像，当我单击它时，它将更改为其他图像。这工作正常。当我再次单击图像以将第二个图像替换为显示的第一个图像时，我发布的代码正在运行。本质上，第一次单击将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代码无法正常运行，但可以在控制台上运行

2 个答案: