0

高さ 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の高さを取得しています

4

5 に答える 5

1

準備完了イベントが送信を上書きしています。Ready イベントを送信するたびに、ページの読み込み後にトリガーされるため、常に 450 になります。

高さを更新するには、より適切なイベントを見つけてください。JQuery には beforeSubmit や complete のようなものがあると確信しています。または、ドキュメントの準備を整えて、最初にdivでそのスタイルクラスを使用してから、submit\onclickイベントのみを試してみてください。

マシュー・ヴァン・アンデルも聴いてください。これが JQuery のコーディング方法です。

于 2012-04-10T15:07:46.637 に答える
0 
//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();

それは本当にあなたが何のために行くかにかかっています。本当に派手にしたい場合は、 hide() の代わりに fadeOut() を使用することもできます ;-)

于 2012-04-10T15:08:22.860 に答える
0

次の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ボタンをクリックしたときに（または何でも）送信したくないが、別のイベント（検証の成功など）に応答して送信したくないこと。

参考文献:

于 2012-04-10T15:49:17.960 に答える
0

を使用するだけでそれを行うことができます

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

これがフィドルのライブデモです。

于 2012-04-10T15:17:11.810 に答える
0

3 つの送信ボタンがあると述べていますが、送信ボタンを ID ( #btnSubmit) で参照しています。私が知っているように、1 つの ID を持つ 1 つの要素しか持てません。代わりに各ボタンにクラスを設定し、class="btnSubmit"「.btnSubmit」で参照します。

jQuery を使用しているので、jQuery はブラウザーに依存しないため、単純な古い docuemt.getElementById の代わりに使用することをお勧めします。

私はおそらく、代わりにこれに似た何かをするでしょう: 

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

幸運を！

于 2012-04-10T15:23:10.407 に答える