0

我有一组 31 个 div，每个 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 回答