Question

我用按钮制作了一个元素，当您单击它时，出现第二个元素。但是我想在发生这种情况时也更改图标，但是我不知道如何将其合并到现有代码中。

这是我的示例：https://codepen.io/anon/pen/oRwLeo

我知道我可以用jQuery做addClass / removeClass，但是我试图避免使用它。我需要做什么才能用JS完成它？

是这样的吗？

function addClass(elem, className) {
    if (!hasClass(elem, className)) {
        elem.className += ' ' + className;
    }
}

如何使用FontAwesome图标及其类将其添加到现有代码中？谢谢！

Answer 1

对于您提供的代码笔示例，您可以在<i>标签（<i id="icon">）中添加ID，并将此代码包含在toggleDiv方法中以更改图标。

HTML：

<a href="#" onclick="togglediv('item')">
  button <i id="icon" class="fas fa-chevron-right"></i>
</a>

JS：

function togglediv(id) {
    var div = document.getElementById(id);
    div.style.visibility = div.style.visibility == "hidden" ? "hidden" : "visible";
    div.style.opacity = div.style.opacity == "0" ? "1" : "0";

    var icon = document.getElementById("icon");
    icon.classList.toggle('fa-chevron-right');
    icon.classList.toggle('fa-chevron-left');
}

编辑： ：修复了第一次单击时div不显示的问题。

CSS：

.right-side {
  background: yellow;
  padding: 30px;
  display: inline-block;
  width: auto;
  transition:visibility 0.3s linear,opacity 0.3s linear;
  position: absolute;
  min-height: 100%;
}

.hide-div {
  opacity: 0;
  visibility: hidden; 
}

.show-div {
  opacity: 1;
  visibility: visible; 
}

HTML：

<div class="right-side hide-div" id="item">
  text goes here
  <p>text goes here</p>
  <p>text goes here</p>
  <p>text goes here</p>
</div>

JS：

var div = document.getElementById(id);
div.classList.toggle('hide-div');
div.classList.toggle('show-div');

Answer 2

首先，您的示例无效HTML。

达到目标的最好方法是少做一些步骤，我建议您从此开始（将其放在codepen上）。

HTML

<a onclick="test()">button</a>

JS

function test() { console.log('You clicked me'); }

在此示例中，如何更改单击图标？

2 个答案: