Question

我正在尝试单击 （仅限移动设备） 来更改文本和图片，但无法正常工作。使用我编写的功能只能更改图像。有人可以帮我吗？这是实时代码：https://codepen.io/oleanderek/pen/OdNzME

    document.querySelectorAll(".nav__label").forEach((el) => {
    el.addEventListener('click', changeArrow);
  el.addEventListener('click', changeText);
});

function changeArrow() {
    var arrow = this.getElementsByClassName('arrow')[0];

    if (arrow.classList.contains("down-arrow")) {
        arrow.classList.remove("down-arrow");
        arrow.classList.add("up-arrow");
    } else if (arrow.classList.contains("up-arrow")) {
        arrow.classList.remove("up-arrow");
        arrow.classList.add("down-arrow");
    }
}

function changeText() {
    var changeText = this.getElementsByClassName('showText')[0];

    if (changeText.classList.contains("showText")) {
        arrow.classList.remove("showText");
        arrow.classList.add("hideText");
    } else if (changeText.classList.contains("hideText")) {
        arrow.classList.remove("hideText");
        arrow.classList.add("showText");
    }
}

Answer 1

如果删除要更改的类，则定义的变量将保持未定义状态。因此，您必须定义一个不会更改的类。我添加了newClass，效果很好。

HTML

 <p class="newClass showText">.</p>

JavaScript

   document.querySelectorAll(".nav__label").forEach((el) => {
    el.addEventListener('click', changeArrow);
  el.addEventListener('click', changeText);
});

function changeArrow() {
    var arrow = this.getElementsByClassName('arrow')[0];

    if (arrow.classList.contains("down-arrow")) {
        arrow.classList.remove("down-arrow");
        arrow.classList.add("up-arrow");
    } else if (arrow.classList.contains("up-arrow")) {
        arrow.classList.remove("up-arrow");
        arrow.classList.add("down-arrow");
    }
}

function changeText() {
    var changeText = document.querySelector(".newClass");

    if (changeText.classList.contains("showText")) {
        changeText.classList.remove("showText");
        changeText.classList.add("hideText");
    } else if (changeText.classList.contains("hideText")) {
        changeText.classList.remove("hideText");
        changeText.classList.add("showText");
    }
}

如何在单击时同时更改图像和文本

1 个答案: