0

我正在尝试更改图像的 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>

varparentClass给了我 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")，它可以在控制台上运行。

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

4

2 回答 2

0

我发现了问题，这是一个愚蠢的错误。我从没想过问题出在其他问题上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");
            }
        }
    });
});
于 2019-12-05T19:00:09.243 回答
0

如果您的意图是在每次单击时将 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");
        };
    });
});
于 2019-12-05T17:43:38.970 回答