javascript - 基本 Javascript - 鼠标点击更改图片和标题

Question

目标

图像的两类(即狗和猫)、图像和图像标题。我想单击该图像并将其更改为第二类别的图片，如果再次单击它将更改为其他类别。因此，我需要以某种方式定义两个类别之一中的图像，然后在单击时交替它们。

<小时/>

HTML

<img src="img/dogImg.jpg" alt="" id="imgClickAndChange">
<h1 id="title">Dog Title</h1>
<p id="caption">caption for dog.</p>

Javascript

function changeImage() {

    if (document.getElementById("imgClickAndChange").src = "img/dogImg.jpg") 
    {
        document.getElementById("imgClickAndChange").src = "img/catImg.jpg";
        document.getElementById("title").innerHTML = "Cat Title";
        document.getElementById("caption").innerHTML = "caption for cat.";

    }
    else
    {
        document.getElementById("imgClickAndChange").src = "img/dogImg.jpg";
        document.getElementById("title").innerHTML = "Dog Title";
        document.getElementById("caption").innerHTML = "caption for dog.";
    }
}

var el = document.getElementById("imgClickAndChange");
el.addEventListener("click", changeImage, false);

现在它似乎正在更改为猫信息，但我不知道如何让它变回狗。在 HTML 和 Javascript 中添加狗的标题似乎是多余的。有没有更简单的方法来完成这一切？谢谢!

Answer 1

您的代码中有一个小错误。

而不是

if (document.getElementById("imgClickAndChange").src = "img/dogImg.jpg")

做

if (document.getElementById("imgClickAndChange").src === "img/dogImg.jpg")