Question

我正在创建一个按钮，打开列表并更改将更改img的类类型。

这是一个覆盖物的开箱器，按钮将打开他们获得的东西。我想要它，所以img从+变为 - 并且它将显示并且不显示他们得到的列表。

以下是代码：

JAVASCRIPT

＆＃13;

function itemLog() {
  var log = document.getElementById("log")
  var btn = document.getElementById("bt")
  alert(btn)
  alert(log)
  if (btn.class == "toggle fa fa-minus-circle") {
      btn.class = "toggle fa fa-plus-circle";
  }
  else {
    btn.class = "toggle fa fa-minus-circle";
  }
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
<title>Home |OWLBS</title>
<link rel="icon" type="image/png" href="favicon.png">
<link href="css/style.css" rel="stylesheet" type="text/css" />
<link href="css/animate.css" rel="stylesheet" type="text/css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" type=text/css>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300,400,500,600,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Raleway:400,600,700' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="js/chance.js"></script>
<script type="text/javascript" src="js/loot.js"></script>
<script type="text/javascript" src="js/spec-loot.js"></script>
<script type="text/javascript" src="js/engine.js"></script>
<body>
<header>
  <nav>
    <div class="grid">
      <div class="grid__item large--one-third logo">
          <h1>
            <a href="index.html" class="logo"><span class="loot">OW</span><span class="junkie">LBS</span></a>
            <span class="version">This is not made by me, I edited another file!</span>
          </h1>
      </div>
      <div class="grid__item large--two-thirds medium-down--hide nav">
        <ul>
          <li><a href="about.html">About</a></li>
          <li><a href="changelog.html">Changelog</a></li>
        </ul>
      </div>
    </div>
  </nav>
</header>

  <div class="wrapper">
    <div class="grid">
      <div class="grid__item item-section">
        <img id="box" src="images/loot-box.png" alt="Loot Box">
        <ul id="crate"></ul>
      </div>
    </div>
  </div>

  <div class="small-wrapper">
    <div class="grid">
      <div class="grid__item center">
        <a class="btn yellow" onclick="openBox()" onmouseover="shakeBox()">OPEN LOOT BOX</a>
        <a class="btn blue btn-toggle" onclick="itemLog()" id="log" href="#">Item Log <i class="toggle fa fa-plus-circle" id="bt" aria-hidden="true"></i></a>
        <div class="grid__item center">
        <ul id="itemlog" style="display: block;" class="in-use">
        <li id="inv0"></ul>
      </div>
      </div>

      <div class="grid__item center">
        <div class="note"> Only for overwatch fans!</div>
      </div>
    </div>
  </div>

</body>
</html>

＆＃13;

如何用JavaScript更改元素类？

0 个答案: