单击以更改多个项目的图像

Question

我正在尝试设置一个javascript函数，该函数将获取向下箭头图像并在单击时将其与向上箭头图像交换。 当图像有 id 时它可以工作，但是因为我有几个使用箭头图像的菜单项，我想尝试让它作为类名或普通名称工作，但我无法获得函数当图像不是 id 时更改图像的来源。 任何人都可以帮忙吗？ 这是我当前的 HTML 标记：

<div class="header__links hide-for-mobile" >
                <a id="subMenu" href="#">Features <img class="downArrow" src="/assets/images/icon-arrow-down.svg"></a>
                <a href="#">Company</a>
                <a href="#">Careers</a>
                <a href="#">About</a>
            </div>

这是我的 JS

const subMenu = document.querySelector('#subMenu');
subMenu.addEventListener('click', function() {
    if(subMenu.classList.contains('subOpen')) {
        subMenu.classList.remove('subOpen');
        document.getElementsByClassName('downArrow').src="/assets/images/icon-arrow-down.svg";
    }

    else {
        subMenu.classList.add('subOpen');
        document.getElementsByClassName('downArrow').src="/assets/images/icon-arrow-up.svg";
    }
})

Answer 1

现在，由于您的标记仅包含一个带有downArrow类的元素，您可以将代码更新为：

const subMenu = document.querySelector('#subMenu');
subMenu.addEventListener('click', function() {
    if(subMenu.classList.contains('subOpen')) {
        subMenu.classList.remove('subOpen');
        document.getElementsByClassName('downArrow')[0].src="/assets/images/icon-arrow-down.svg";
    }

    else {
        subMenu.classList.add('subOpen');
        document.getElementsByClassName('downArrow')[0].src="/assets/images/icon-arrow-up.svg";
    }
})

但更好的方法是getELementsByClassName方法的结果。 你可以这样做：

const subMenu = document.querySelector('#subMenu');
subMenu.addEventListener('click', function() {
    if(subMenu.classList.contains('subOpen')) {
        subMenu.classList.remove('subOpen');
        Array.from(document.getElementsByClassName("downArrow")).forEach(
            function(element, index, array) {
                element.src="/assets/images/icon-arrow-down.svg";
            }
        );
    }

    else {
        subMenu.classList.add('subOpen');
        Array.from(document.getElementsByClassName("downArrow")).forEach(
            function(element, index, array) {
                element.src="/assets/images/icon-arrow-up.svg";
            }
        );
    }
})