jQuery는 제출시 여러 클래스를 애니메이션합니다

Question

나는 각각 수치 클래스를 가진 31 개의 div 그룹이 있습니다. 제출 버튼을 클릭 할 때 오늘날의 클래스 날짜 또는 이전 애니메이션이있는 모든 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 {
    }
});

나는 현재 각 개인 div가 당신이 그들을 호버링 할 때 애니메이션을 가지고 있지만, 제출 버튼을 클릭 할 때 그룹을 애니메이션 할 수 있기를 원합니다. 고맙습니다!

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에서 사용자 정의 속성을 사용하지 않는 이유는 무엇입니까? 이와 같은 것을 시도하십시오.

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>

자바 스크립트 :

$('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"이벤트 핸들러에 추가하십시오 ...