javascript - 使用 Jquery 更改单击时的图像/类？

Question

嗨，我目前正在 Javascript 类(class)中练习 JQuery。我已经取得了像树懒一样的进步，但开始工作的感觉很好。 (登录表单向下滑动并将加号更改为减号)我的问题似乎是将减号类更改回加号，而不是像现在一样吓坏表单。有人可以告诉我我的代码有什么问题吗？请原谅这个彻底的菜鸟。

//Fading in Advertisent
$(document).ready(function() {
  $("#ad").animate({
    top: '100px',

  });

  //Closing The Advertisement
  $("#adbtn").click(function() {
    $("#ad").fadeOut(5000);
  });

  $(".plus").click(function() {
    $("form").slideToggle(500); // half second duration
    $(".plus").removeClass("plus").addClass("minus");
  }); // end function

}); // end function

$(document).ready(function() {
  $("#ad").animate({
    top: '100px',

  });

  //Closing The Advertisement
  $("#adbtn").click(function() {
    $("#ad").fadeOut(5000);
  });

  $(".plus").click(function() {
    $("form").slideToggle(500); // half second duration
    $(".plus").removeClass("plus").addClass("minus");
  }); // end function

  $(".minus").click(function() {
    $("form").slideUp(500); // half second duration
    $(".minus").removeClass("minus").toggleClass("plus");
  }); // end function

}); // end function

body {
  background-color: #fff;
  font-family: arial, sans-serif;
  font-size: 100%;
}
a {
  color: blue;
}
#welcome p strong {
  color: navy;
  font-size: 1.2em;
}
#welcome p:first-of-type {
  margin-bottom: 50px;
}
section {
  margin-bottom: 50px;
}
/* main container */

#main {
  width: 960px;
  margin: 50px auto;
  border: 2px solid #000;
  padding: 20px;
  background-color: #e0e0ff;
  position: relative;
  box-sizing: border-box;
}
/* form container */

#loginDiv {
  width: 300px;
  position: absolute;
  left: 650px;
  top: 6px;
  z-index: 100;
  border: 1px solid navy;
}
/* paragraph that shows the text "Login" which is clicked on to display/remove the form */

#login {
  margin: 0;
  cursor: pointer;
  background-color: rgb(255, 255, 255);
  padding: 5px 0 2px 30px;
}
#login:hover {
  background-color: rgb(110, 138, 195);
}
/*  plus sign icon for login form */

.plus {
  background: url(img_open.png) no-repeat 8px 7px;
  background-color: rgb(110, 138, 195);
}
/* minus sign icon for login form */

.minus {
  background: url(img_close.png) no-repeat 8px 7px;
}
/*form is hidden when the page loads */

#loginDiv form {
  padding: 10px 10px 10px 10px;
  display: none;
  background-color: rgb(255, 255, 255);
}
#loginDiv label {
  display: block;
  width: 100px;
  margin: 0 15px 0 0;
}
#loginDiv input {
  font-size: 1.2em;
  border: 1px solid navy;
}
#loginDiv input:focus {
  background-color: rgb(110, 138, 195);
  border: 2px solid navy;
}
#loginDiv input[type=button] {
  width: 100px;
}
footer {
  text-align: center;
  margin-top: 50px;
  margin-bottom: 10px;
  padding: 20px;
  border-top: 1px solid #000;
}
/* ad is not shown when the page loads  */

#ad {
  width: 300px;
  height: 300px;
  border: 1px solid #000;
  background-color: yellow;
  position: absolute;
  left: 330px;
  top: -500px;
  /* you can change this inbitially for viewing purposes only but be sure to set it back */
  box-sizing: border-box;
  background-image: url(ad.jpg);
  background-repeat: no-repeat;
}
/* close button on ad */

#adbtn {
  width: 50px;
  height: 50px;
  border: 2px solid #000;
  border-top-width: 1px;
  border-right-width: 1px;
  background-color: #fff;
  font-size: 3em;
  text-align: center;
  cursor: pointer;
  box-sizing: border-box;
  position: absolute;
  top: 0px;
  right: 0px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- main container -->
<div id="main">
  <section id="loginDiv">
    <!-- when this is clicked on the below form should be displayed and plus sign should change to minus sign-->
    <p id="login" class="plus">Login</p>
    <form>
      <p>
        <label for="username">Username:</label>
        <input type="text" name="username" id="username">
      </p>
      <p>
        <label for="pw">Password:</label>
        <input type="password" name="pw" id="pw">
      </p>
      <p>
        <input type="button" value="Submit">
      </p>

      <!-- placeholder for response if form data is correct/incorrect -->
      <p id="error"></p>
    </form>
  </section>
  <section id="welcome">
    <h1>Welcome to the Local jQuery User Group Website</h1>
    <p> <strong>Click the login button at the top of the page to login. To become a member please <a href="#">Register</a></strong> 
    </p>
    <h2>About this page layout:</h2>
    <p>The main container (parent) has 'relative' positioning so that the 'login' container can be absolutley positioned with respect to that main container. Otherwise, it would default to being absolutley positioned with respect to the window.</p>
    <p>In order for the login panel to be placed on top of the page we need to use absolute positioning, otherwise, it would move the rest of the content down as done in the FAQ assignment. Technically, absolute positioning takes that element out of the
      normal flow of the document, so that it is on top of the page. The 'ad' is also absolutely positioned to the same main container.</p>
  </section>
  <section>
    <h2>This week's agenda:</h2>
    <p>There will be a live meeting this Tuesday evening from 7:00pm to 8:00pm PST using our WebEx Conferencing Software. It will be recorded! Please note that the code samples will be available on our GitHub repository.</p>
  </section>
  <footer>Copyright &copy; Local jQuery User Group</footer>

  <!--  ad which is absolutely positioned -500px from the top so you do not see it when page loads-->
  <div id="ad">
    <div id="adbtn">X</div>
  </div>

  <!-- end main container -->
</div>

Answer 1

您可以使用toggleClass代替removeClass和addClass。另外，您应该更改句柄函数中的 .plus 选择器以引用元素 (this)。

$(".plus").click(function(){
      $("form").slideToggle(500);  // half second duration
      $(this).toggleClass("plus").toggleClass("minus");
}); // end function