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或者完成。或者尝试摆脱文档准备并最初在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（）方法而不是juggling类。像这样......

myDiv.hide();

这实际上取决于你的目标。你也可以使用fadeOut（）代替hide（），如果你想得到真正的幻想; - ）

Answer 3

您只需使用

即可

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

Here 是小提琴现场演示。

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 Fiddle demo

使用此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基于以下假设：

您正在尝试处理id等于divHeight的元素，
您希望分配给该div的类控制高度
您有type="submit"，
您不想在点击按钮时提交form（或其他），而是响应另一个事件（例如验证成功）。

参考文献：

Jquery高度问题

5 个答案: