0

それぞれ数値クラスを持つ 31 個の div のグループがあります。送信ボタンをクリックすると、今日の日付以前のクラスを持つすべての div がアニメーション化されるようにしようとしています。

<div class="image 1">SAMPLE TEXT</div>
<div class="image 2">SAMPLE TEXT</div>
<div class="image 3">SAMPLE TEXT</div>
<div class="image 4">SAMPLE TEXT</div>
<form>
   <input class="previous" type="submit" value="View Previous" />
</form>

そして、このjQueryのビットですが、うまくいきません。その理由を一生理解できません。

$("form").submit(function() 
    {
    var number = $('div.image').attr("class").match(/\d+/),
        d = new Date(),
        day = d.getDate();

    if (number <= day){
        $('div.image').animate({"height":"0px", "width":"150px", "bottom":"75px"}, 500);
    }
    else {
    }
});

私は現在それを持っているので、カーソルを合わせると個々の div がアニメーション化されますが、送信ボタンをクリックするとそれらのグループもアニメーション化できるようにしたいと考えています。ありがとうございました!

4

3 に答える 3

0

最初の : 関数フォーム送信から false を返す必要があります (ページをリロードしないでください)。それで

d = new Date(),
day = d.getDate();

$(".image").each(function(i,e){
    var number = $(e).attr("class").match(/\d+/);
    if (number <= day)
        $(e).addClass('active'); 
});

$('div.active').animate({"height":"0px", "width":"150px", "bottom":"75px"}, 500);
于 2013-11-08T09:36:15.057 に答える
0

アニメーションの実行が開始される前にフォームが既に送信されているため、return falseアニメーションの後に追加する必要があります

そのように

if (number <= day){

    $('div.image').animate({"height":"0px", "width":"150px", "bottom":"75px"}, 500);

    return false;
}

else {

}
于 2013-11-08T09:36:58.467 に答える
0

div でカスタム属性を使用しないのはなぜですか? このようなことを試してください。

HTML:

<div class="image" number="1">SAMPLE TEXT</div>
<div class="image" number="2">SAMPLE TEXT</div>
<div class="image" number="3">SAMPLE TEXT</div>
<div class="image" number="4">SAMPLE TEXT</div>
<form>
   <input class="previous" type="submit" value="View Previous" />
</form>

JavaScript:

$('div.image').each(function()
{
    var number = $(this).attr('number'),
        d = new Date(),
        day = d.getDate();

    if (number <= day){
        $(this).animate({"height":"0px", "width":"150px", "bottom":"75px"}, 500);
    }
});

上記をテストするには、「OnSubmit」または「OnHover」イベント ハンドラに追加します...

于 2013-11-08T09:38:21.927 に答える