Jquery高度问题

我有一个页面，当它第一次加载时，我想添加一个高度为450px的div。该页面有3个提交按钮，当任何人点击这3个按钮中的任何一个时，我需要将高度设置为0px

这就是我所做的`

     <style type="text/css">

    .DivHeight
    {
        height:450px;
    }
    .DivNoHeight
    {
        height:0px;
    }

   </style>

                   <script type="text/javascript">
          $(document).ready(function () {

           document.getElementById("divHeight").className = "DivHeight";

          $("#btnSubmit").click(function () {


            document.getElementById("#divHeight").className = "DivNoHeight";
            alert("Test");

        });
    });
      </script>

.DivHeight
{
高度：450px；
}
.DivNoHeight
{
高度：0px；
}
$（文档）.ready（函数（）{
document.getElementById（“divHeight”）.className=“divHeight”；
$（“#btnsupmit”）。单击（函数（）{
document.getElementById（“#divHeight”）.className=“DivNoHeight”；
警报（“测试”）；
});
});

但是当我在页面加载上有上述代码时，它显示良好，但当我单击Submit按钮时，结果在450px之后出现：(

我错过了什么

更新：

只有手动将类添加到div中，我才能获得450 PX的高度

---

就绪事件将覆盖提交。每次提交就绪事件都将在页面加载后触发，因此始终为450

找到一个更好的事件来更新高度。我确信JQuery有一些类似于beforeSubmit或complete的事件。或者尝试在div上使用该样式类，然后仅尝试submit\onclick事件

另外，请听MatthewVanAndel的话，这就是JQuery的编码方式

//On ready... (shorthand)
$(function(){

    //Load the div element.
    var myDiv = $("#divHeight");

    //Assign the height class to the div element
    myDiv.addClass("DivHeight");

    //Set a click event for the submit button
    $("#btnSubmit").click(function () {
            //Remove height class from div element, set noheight class...
        myDiv.removeClass('DivHeight').addClass('DivNoHeight');
    });

});

您可能想考虑使用jQuery .HIDED（）方法而不是杂耍类。像……/P>

myDiv.hide();

---

这真的取决于你要做什么。如果你想变得非常有趣，你也可以使用fadeOut（）而不是hide（）；-）

你只需使用

$(document).ready( function() {
  $("#divHeight").addClass("DivHeight");
  $("#btnSubmit").click(function () {
    $("#divHeight").addClass("DivNoHeight");
    alert("Test");
  });
});

---

是fiddle live演示。

您声明有三个提交按钮，但引用了带有id的提交按钮（

#btnSubmit

）。正如我所知，您只能有一个id为的元素。请将每个按钮上的类设置为

class=“btnSubmit”

，并通过“.btnSubmit”引用它们

当您使用jQuery时，我建议您使用它而不是普通的旧docuemt.getElementById，因为jQuery独立于浏览器

我可能会这样做：

$(document).ready(function() {
    $("#divHeight").addClass("DivHeight");
    $(".btnSubmit").click(function() {
        $("#divHeight").removeClass("DivHeight");
        $("#divHeight").addClass("DivNoHeight");
    });
});

---

祝你好运

我建议使用以下jQuery：

var div = $('#divHeight');
div.addClass('DivHeight');

$('button[type="submit"],input[type="submit"]').click(
    function(e) {
        e.preventDefault(); // prevents actual submission
        div.toggleClass('DivHeight DivNoHeight');
        console.log(div.height());
    });​

使用此HTML的演示（当然要适应您的需要）：

此jQuery基于以下假设：

您试图处理的元素的

id

等于

divHeight

您希望分配给该

div

的类控制高度

您有多个按钮或输入，

type=“submit”

您不想在单击按钮时提交

表单

（或其他），而是为了响应另一个事件（例如验证成功）

---

参考资料：

---

因为您使用的是jQuery，所以可以使用

$（“#divHeight”）

而不是

document.getElementById（“divHeight”）

而不是native

。className

可以使用

.addClass

函数。我更改了它。不，这无助于更新问题的更多细节，请再看一次。您元素的ID肯定是

divHeight

，而不是

divHeight

？@SmilingLily这是一个建议，而不是答案。请在你修复了你所拥有的东西之后再尝试一下。你能同时显示你的（相关）HTML吗？您还有三个提交按钮，但您只将一个单击处理程序附加到id为

#btnSubmit

的按钮上。。。除非所有三个按钮都有

id

，这将是无效的HTML。另外，如果有多个提交按钮，请给它们一个公共类，而不是id。您可以将

$（“#btnSubmit”）

替换为

$（“.btnSubmit”）

。然后，我说了3个按钮，我正在用一个按钮测试代码。好的！我不明白。我希望我能以任何方式提供帮助。我想你已经找到了你的答案，在提交时重新加载页面。快乐编码！你能用相关的HTML更新你的例子吗？如果您有一个包含两个元素的文档，#divHeight和#btnSubmit，那么代码应该可以顺利运行。

<div id="divHeight">
</div>
<!-- ...other html... -->
<input type="submit" />
<button type="submit">Submit</button>​

.DivHeight {
    background-color: #f90; // just for testing purposes
    height: 450px;
}

.DivNoHeight {
    background-color: #ffa; // just for testing purposes
    height: 0;
}​