jQuery تنشيط فئة متعددة على إرسال

Question

لدي مجموعة من 31 divs لكل منها فئة رقمية. أحاول أن أجعلها جميع divs مع فئة من تاريخ اليوم أو في وقت مبكر عند النقر فوق زر إرسال.

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

لدي حاليًا ، لذا فإن كل فرد ينقض عندما تحوم فوقها ، لكنني أريد أيضًا أن أكون قادرًا على تحريك مجموعة منهم عند النقر فوق زر الإرسال. شكرًا لك!

Answer 1

الأول: يجب عليك إرجاع 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);

Answer 2

لأن النموذج يقدم بالفعل قبل بدء تشغيل التحريك يجب أن تضيف return false بعد تحريك

مثل هذا

if (number <= day){

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

    return false;
}

else {

}

Answer 3

لماذا لا تستخدم سمة مخصصة على DIV؟ جرب شيئًا كهذا.

لغة البرمجة:

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