1

jQuery の作成は初めてで、ヘルプが必要な場合があります。

フォーム要素がクリックされたときにスライドさせたい非表示の div があります。ただし、.click()関数を使用するとデータが送信されず、.submit()関数を使用するとdivがスライドしません。

また、divが既に出ていて、アニメーション化されていないかどうかも知りたいです。

これは可能ですか？

ありがとう。

ここにコードがあります。http://jsfiddle.net/gZWby/23/

$(document).ready(function () {
    $('.purchase_button').submit(function () {
        if ($("#top_margin").css("top") == "-135px") {
            $("#top_margin").animate({
                top: "0px"
            }, 500);
            $("#total_wrap").animate({
                top: "0px"
            }, 500);
        } else {
            $("#top_margin").animate({
                top: "-135px"
            }, 500);
            $("#total_wrap").animate({
                top: "-135px"
            }, 500);
        }
        return false;

    });
});

HTML:

<div id="top_margin"></div>
<form>
    <input type="submit" value="Submit" name="smokehouse_1_ATC" class="purchase_button">
</form>

CSS:

#top_margin {
    width:100%;
    height: 140px;
    background-color:orange;
    z-index: 10;
    position: relative;
    /*I would like this div to always be fixed to the top of the browser window*/
    top: -135px;
    left: 0;
    color:#FFF;
    padding-top:5px;
}

input.shop_button, input.purchase_button {
    width:143px;
    background-color:black;
    border:none;
    color:#74cccc;
    padding: 5px 0px;
    margin-top:10px;
}

input.shop_button:hover, input.purchase_button:hover {
    color:#ff3636;
}
4

1 に答える 1

2

次の答えは、両方の問題を解決するはずです。

送信する要素が間違っています。$('.purchase_button').submit(fn(){...})これを次のように変更する必要があります。

$('form').submit(function(){ 
 //YOUR CODE HERE
});

その理由は、ボタン自体に「送信」イベントがないためです。フォームのみが行います。したがって、ボタンではなくフォーム自体で「送信」をリッスンする必要があります。

また、送信後に省略したい場合は、ステートメントelseからブロックを削除する必要があります。ifそれはそれを元に戻すためだけにあります。フィドルで正しいコードを確認してください。

ここでフィドル

アップデート

この回答へのコメントは、送信の実行を妨げているものを示しています。return false送信が実際に発生する前にイベントリスナーが起動されるため、Javascript 内にがあります。これにより、送信が起動されなくなります。これreturn falseは、検証に失敗した場合にフォームの送信を防止するための一般的な方法です。

更新 2

ページにとどまり、スライダーをオフにしたい場合は、従来のフォーム送信以外のことを行う必要があります。action従来の送信は、別のページに投稿するメソッドに依存するか、定義されたアクション メソッドがない場合、同じページに投稿されます。いずれにせよ、リフレッシュする必要があります。それが起こらないようにフォームを送信するには、jQuery Forms Pluginを提案できますか?

そのプラグインを使用すると、jQuery は次のようになります。

$(function(){
   $('form').ajaxForm(function() { 
     $("#top_margin").animate({
            top: "0px"
        }, 500);
        $("#total_wrap").animate({
            top: "0px"
        }, 500); 
   });
});

そして、残りを完全に切り取ることができます。

于 2013-03-08T21:19:27.917 に答える