Question

<script type="text/javascript">
        $(document).ready(function() {
    $('.signupbutton').addClass("hidden");

    $('.signupbutton').click(function() {
        var $this = $(this).parent();
        if ($this.hasClass("visible")) {
            $this.removeClass("visible").addClass("hidden");
        } else {
            $this.removeClass("hidden").addClass("visible");
        }
    });
});
</script>

我在第3行遇到语法错误。我不知道我哪里做错了。这里有什么遗漏吗？

我尝试制作一个事件，当我点击图像时，我的隐藏div会出现（充当按钮）

但我不知道为什么我在第3行遇到这个错误。

<div class="signupbutton">
<img src="Source/Header/images/button2_03.jpg"
    onMouseOver="this.src='Source/Header/images/button2_05.jpg'"
    onMouseOut="this.src='Source/Header/images/button2_03.jpg'" 
    width="128" height="50">
<div>
      <div id="logintable"><table width="240" height="269" border="0">
      <tr>
        <th width="199" height="17" scope="col">&nbsp;</th>
        <th width="10" scope="col">&nbsp;</th>
        <th width="22" scope="col">&nbsp;</th>
      </tr>
      <tr>
        <td height="16" style="font-family: 'Gill Sans', 'Gill Sans MT', 'Myriad Pro', 'DejaVu Sans Condensed', Helvetica, Arial, sans-serif; font-size: 12px; text-align: left;">&nbsp;</td>
        <td>&nbsp;</td>
        <td></td>
      </tr>
      <tr>
        <td height="53" style="font-family: 'Gill Sans', 'Gill Sans MT', 'Myriad Pro', 'DejaVu Sans Condensed', Helvetica, Arial, sans-serif; font-size: 12px;"><label for="textfield">Username:</label>
          <span style="text-align: left"></span>
          <input name="textfield" type="text" id="textfield" size="30"></td>
        <td>&nbsp;</td>
        <td><form id="form2" name="form2" method="post">
        </form></td>
      </tr>
      <tr>
        <td height="49"><label for="textfield2">Password:</label>
          <input name="textfield2" type="text" id="textfield2" size="30"></td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td height="34">Forgot your USERNAME or PASSWORD</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td height="33"><input type="checkbox" name="checkbox" id="checkbox">
          Remember me</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td height="51"><input type="button" name="button" id="button" value="Sign In" size="20"></td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
                </table>
    </div>
        </div>

这里是html ..我试图按照我从互联网上获得的方法之一，但我确实改变了一点点。我有什么不对的吗？

上面是html

Answer 1

您可以使用jquery hide()和show()。

 $(document).ready(function() {
    $('.signupbutton').hide();
    $('.signupbutton').click(function() {
        var $this = $(this).parent();
        if ($this.is(":visible")) {
            $this.hide();
        } else {
             $this.show();
        }
    });
});

查看此处： http://jsfiddle.net/2Gn7a/

Answer 2

您正在为按钮指定parent（），但是您正在为按钮分配addClass（），所以只需从中删除父（）。

<script type="text/javascript">
        $(document).ready(function() {
    $('.signupbutton').addClass("hidden");

    $('.signupbutton').click(function() {
        var $this = $(this);
        if ($this.hasClass("visible")) {
            $this.removeClass("visible").addClass("hidden");
        } else {
            $this.removeClass("hidden").addClass("visible");
        }
    });
});
</script>

JQuery for addClass上的语法错误

2 个答案: