基本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")

DO

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

Answer 2

使用.src，您将获得图像的绝对路径。请改用getAttribute

试试这段代码：

if (document.getElementById("imgClickAndChange").getAttribute("src") === "img/dogImg.jpg") {
    document.getElementById("imgClickAndChange").setAttribute("src", "img/dogImg.jpg")
    ...