javascript - 如何在登录后显示某些按钮和余额

Question

header {
  width: 100%;
  background-color: #2C2F33;
  border-bottom: 5px #FF9F00 solid;
  font-size: 12.5px;
  display: flex;
  align-items: center
}

#logo img {
  float: left;
  margin: 0;
  padding: 20px;
  width: 125px;
  height: 42.5px;
  background-color: #2C2F33;
}

.beforelogin {
  display: flex;
  justify-content: space-between;
  margin-left: auto;
}

.afterlogin {
  display: flex;
  justify-content: space-between;
  margin-left: auto;
}

.navbar {
  display: flex;
  justify-content: space-between;
  margin-left: auto;
}

li {
  display: inline;
  padding: 0 20px 0 20px;
}

#rightnavbar li {
  display: inline-block;
  position: relative;
}

.navbar,
li,
a {
  text-decoration: none;
  list-style-type: none;
  text-transform: uppercase;
  background-color: #2C2F33;
  position: relative;
}

#rightnavbar a:hover {
  color: #FF9F00;
}

#rightnavbar a::before {
  content: '';
  display: block;
  height: 3px;
  background-color: #FF9F00;
  position: absolute;
  top: -34px;
  width: 0%;
  transition: all ease-in-out 225ms;
}

#rightnavbar a:hover::before {
  width: 100%;
}

#userbalance {
  background-color: #23272A;
  padding: 12.5px;
  margin-right: auto;
  border: 2.5px #FF9F00 solid;
}

#balance,
#dsh {
  color: #FF9F00;
}

#dosh {
  color: #FFFFFF;
}

<header>

  <div id="logo">

    <a href="index.html"><img src="./img/logo.png" title="Website Info"></img>
    </a>

  </div>

  <div class="beforelogin">

    <div id="rightnavbar">

      <ul>

        <li><a href="index.html">Login</a></li>

      </ul>

    </div>

  </div>

  <div class="afterlogin">

    <div class="navbar">

      <div id="leftnavbar">

        <ul>

          <li id="userbalance"><span id="balance">Balance:</span> <span id="dosh">1.00000000</span> <span id="dsh">DSH</span></li>

        </ul>

      </div>

      <div id="rightnavbar">

        <ul>

          <li><a href="index.html">User Panel</a></li>

          <li><a href="index.html">News</a></li>

          <li><a href="index.html">View on Social Media</a></li>

          <li><a href="index.html">Logout</a></li>

        </ul>

      </div>

    </div>

  </div>

</header>

我正在尝试制作我的网站，在用户登录后 .beforelogin的 <li>消失并且.afterlogin的 <li>出现。

所以只有Login用户按钮，直到用户登录(在标题/导航栏中)，登录后 Login将其位置替换为 Logout和其他 3 个按钮，用户余额出现。

我问了一个 webdev friend ，他说使用 JavaScript/jQuery，但我不太擅长这些。我仍在努力寻找一些好的教程来学习 JavaScript/jQuery for webdev，但我不确定去哪里找。

Answer 1

需要有一些触发器来执行这个脚本。在这种情况下，您可以在标题下临时添加此 HTML

<br />
<input type="radio" name="loginStatus" id="loggedIn" value="Logged in" checked="checked" /> User is logged in
<br />
<input type="radio" name="loginStatus" id="loggedOut" value="Logged out" /> User is logged out

现在是 jQuery:

// sets initial status - this can be done by CSS as well
if ($('input#loggedIn').prop('checked')) {
  alert('Login is visible so after-loggin is hidden');
  $('.beforelogin').css('display', 'none');
  $('.afterlogin').css('display', 'block');
} else {
  alert('Login is visible so after-loggin is hidden');
  $('.beforelogin').css('display', 'block');
  $('.afterlogin').css('display', 'none');
}
// this changes the status based on the radio buttons
$('input[name = "loginStatus"]').change(function() {
  if ($('input#loggedIn').prop('checked')) {
    $('.beforelogin').css('display', 'none');
    $('.afterlogin').css('display', 'block');
  } else {
    $('.beforelogin').css('display', 'block');
    $('.afterlogin').css('display', 'none');
  }
});

这会让您获得显示 block ，或者是，或者不显示。要简单地使用 jQuery 查看是否显示一个，如果显示则隐藏另一个，您可以这样做:

var isDisplayed = $('.afterlogin').css('display', 'block');
var isNotDisplayed = $('.afterlogin').css('display', 'none');

if ($('.beforelogin').css('display') == 'none') {
  $(isDisplayed);
} else {
$(isNotDisplayed);
}

如果您不熟悉 jQuery，那么您应该学习初学者教程，了解将脚本和所有这些东西放在哪里。 YouTube 有免费的好视频。

这是一个 jsfiddle