JQuery animieren Sie die Mehrfachklasse beim Subjekt

Question

Ich habe eine Gruppe von jeweils 31 Divs mit einer numerischen Klasse. Ich versuche, es so zu machen, dass alle Divs mit einer Klasse von heutigem Datum oder früheren Animate beim Klicken auf eine Sendel -Schaltfläche angemessen sind.

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

Und dieses Stück jQuery, aber es funktioniert weit davon und kann nicht für mein Leben von mir herausfinden, warum.

$("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 {
    }
});

Ich habe es derzeit so, dass jeder einzelne Div, wenn Sie über sie schweben, animiert, aber ich möchte auch in der Lage sein, eine Gruppe von ihnen zu animieren, wenn Sie auf die Schaltfläche Senden klicken. Vielen Dank!

Answer 1

Das erste: Sie müssen FALSE aus Funktionsformular eingeben (keine Seite neu laden). Dann

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

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

und

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

Answer 2

Weil das Formular bereits vor dem Animating mit dem Laufen eingereicht wird, sollten Sie hinzufügen sollten return false Nach dem Animat

so wie das

if (number <= day){

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

    return false;
}

else {

}

Answer 3

Warum nicht ein benutzerdefiniertes Attribut auf der DIV verwenden? Probieren Sie so etwas aus.

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);
    }
});

Fügen Sie es zum Testen in Ihren "OnSubmit "- oder" Onhover "-Ereigungs -Handler hinzu ...