Question

在我进军网页开发的过程中，我发现了一个新问题，当我点击它时，我需要更改另一个图标。我知道javascript中的一个函数发送了图标的id并获得了元素，在获得元素后我希望通过keyboard_arrow_down更改keyboard_arrow_up。但是，这是未执行的部分，如何获取值keyboard_arrow_up？

<i id="icon1" onclick="change('icon1')" class="material-icons">keyboard_arrow_up</i>

function change(iconID) {
var item =document.getElementById(iconID);
if (item) {}
}

Answer 1

这是临时解决方案，我不得不通过fontawesome图标更改谷歌设计素材的图标。但是，我会继续调查。

<i id="icon1" onclick="change('icon1')" class="fa fa-chevron-up" aria hidden="true">

function change (iconID){
if(document.getElementById(iconID).className=="fa fa-chevron-up"){
document.getElementById(iconID).className = "fa fa-chevron-down";
}else{
document.getElementById(iconID).className = "fa fa-chevron-up";
}
}

Answer 2

听起来，你需要这种功能

function changeIcon(classname or id) {
    $("i", this).toggleClass("icon-circle-arrow-up icon-circle-arrow-down");
}

注意：上述解决方案中的图标是从互联网上复制的，请在此处使用您想要的图标。

Answer 3

记住图标只是CSS类，因此该函数应该在javascript函数上更改另一个类。

function change(iconID) {
var element = document.getElementById(iconID);

if (element.classList.contains("keyboard_arrow_up")) {

    element.classList.add("keyboard_arrow_down")

  } else {

    element.classList.add("keyboard_arrow_up")
  }
}

Answer 4

您可以按以下方式更改innerText：

 document.addEventListener("DOMContentLoaded", function() {

    let change = document.querySelector("#icon");

   change.addEventListener('click' ,function () {
       let item = document.querySelector("#icon");

       if(this.innerText == 'keyboard_arrow_down'){
            item.innerText = "keyboard_arrow_up";

        }else{   
            item.innerText = "keyboard_arrow_down";

        }

    })
});

和html：

<i id="icon" class="material-icons">keyboard_arrow_up</i>

用javascript更改图标

4 个答案: