javascript - JavaScript正在某个不应执行的功能

所以，我有了这个toggleImage函数：

    var imgName
function toggleImage() {
    image = document.querySelector("img")
    if (imgName == "business") {
        image.src = "assignment-resources/images/business.jpg";
        imgName = "sports"
    }
    else {
        image.src = "assignment-resources/images/sports.jpg";
        imgName = "business"
    }

}

在我设置此toggleModal函数之前，它工作正常。

    var modalOpen
function toggleModal(){

    if (modalOpen == "yes"){
        modal.style.display = "block";
        modalOpen = "no"
    }

    else{
        modal.style.display = "none";
        modalOpen = "yes"
    }

现在，toggleImage函数是在模式中执行的，而不是更改应该更改的图像，即使它们都完全分开。

模态代码：

        <section class = "modal" id = "modal">
        <section class = "modal-content">
                <img src = "assignment-resources/images/razgriz.jpg">
        </section>
        </section>

图片部分代码：

<section class= "picture"><img src = "assignment-
resources/images/business.jpg"></section>

基本上，我有一个swapImage按钮，该按钮应该在“图片”部分中交换图像，并且它工作正常，直到添加了toggleModal函数。

现在，即使未显示模态，swapImage函数也会更改模态内的图像，而不是“图片”部分。

抱歉，如果我不太清楚，我仍在学习所有这些内容。

最佳答案

您需要对document.querySelector("img")更加具体。这将返回找到的第一个图像。在您的情况下，听起来好像是在模态中查找图像。

使用您的HTML，您可以选择以下更具体的内容：

document.querySelector("section.picture img")

这将获得第一个图像，该图像是第一个section与class=picture的后代。当然，您可能想要添加ID或其他内容以进行所需的确切选择。