jquery - Jquery高度问题

Question

第一次加载时我有一个页面，我想添加一个高度为 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>

但是当我在页面加载上有上面的代码时它显示正常但是当我点击提交按钮时结果在 450px 之后出现:(

我错过了什么？

更新：

仅当我在 div 中手动添加类时，我才能获得 450 PX 高度

Answer 1

就绪事件正在覆盖提交。每次提交ready事件都会在页面加载后触发，因此总是450。

找到更好的事件来更新高度。我确信 JQuery 有一些类似 beforeSubmit 或 complete 的东西。或者尝试摆脱准备好的文档并最初在 div 上使用该样式类，然后尝试仅使用 submit\onclick 事件。

另外，请听 Matthew Van Andel。这就是 JQuery 的编码方式。

Answer 2

//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 的 .hide() 方法而不是杂耍类。像这样...

myDiv.hide();

这真的取决于你要做什么。如果你想变得非常花哨，你也可以使用 fadeOut() 而不是 hide() ;-)

Answer 3

您可以简单地使用

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

这是小提琴现场演示。

Answer 4

您声明您有三个提交按钮，但引用了带有 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");
    });
});

祝你好运！

Answer 5

我建议使用以下 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());
    });​

JS 小提琴演示。

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

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

而这个（或类似的）CSS：

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

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

这个 jQuery 基于以下假设：

1. 您正在尝试处理具有id等于的元素divHeight，
2. 你希望分配给它的类div来控制高度，
3. 您有多个按钮或输入type="submit"，
4. 您不想form在单击按钮时提交（或其他），而是为了响应另一个事件（例如验证成功）。

---

参考：

• addClass().
• event.preventDefault().
• toggleClass().