Question

所以，我有这个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函数也会更改模态中的图像，而不是“图片”部分。

道歉，如果我不是很清楚，我还在学习这一切。

Answer 1

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

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

document.querySelector("section.picture img")

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

Javascript正在某个地方执行一个它不应该执行的功能

1 个答案: