jQuery使用基于元素

Question

我正在尝试为多个JQuery元素设置动画，但是基本属性不在该元素的ID范围内，一旦动画完成，就运行一个回调函数。

我已经考虑过为此创建一个循环，但是由于我希望完成功能只能运行一次，所以这行不通。

这不完全是我在做什么，但我认为这表明了重点。 对于HTML：

<div id = "n1">1</div>
<div id = "n2">2</div>
<div id = "n3">3</div>
<button>Go</button>

脚本：

function complete() {
    //does something
}
$("button").click(function() {
    $("div").animate({width: String(id.charAt(1) * 10) + "%"}, 500, null, complete);
});

但是我不确定如何真正获取ID。

如果这行得通，我将拥有三个宽度分别为10％，20％和30％的条形。

谢谢！

编辑：我意识到我可以循环运行并以超时运行完成。我应该这样做吗？

Answer 1

只需在所有div周围添加包装器：

<div class=wrapper>
    <div id = "n1">1</div>
    <div id = "n2">2</div>
    <div id = "n3">3</div>
</div>
<button>Go</button>

确保您的div具有一定的高度和宽度样式，以

开头

#n1, #n2, #n3 {
  width:100px;
  height: 20px;
  background: green
}

根据需要具有完整功能：

function complete() {
    alert("done")
}

...然后将动画事件应用于每个div ，使用布尔值以确保仅调用一次回调：

var done = false;
$("button").click(function() {

$(".wrapper").find('div').each(function() {
    id = $(this).attr('id')
    width = String(id.charAt(1) * 10) + "%"
    $(this).animate({width: width}, 500, function() {
    if(!done) {
    done = true;
    complete()
    }
    })
})

})

结果：

这里是Fiddle

Answer 2

  

如何让完成功能仅运行一次？

否，将为每个对象触发complete事件，因此对于您的示例，将触发3次。但是我们可以使用计数器仅处理一次您想要做的事情。

var counter = 0;
var total = 3;

function complete() {
  counter += 1;
  if (counter==total){
    //does something
  }
}

  

如何获取ID？

在onClick事件中，您可以通过this获取DOM对象，因此只需调用$(this).attr("id")

就可以获取其ID。

  

完整代码

var counter = 0;
var total = 0;

function complete() {
    counter += 1;

if (!total) total = $("div[id^=n]").length;

if (counter==total){
    //does something
}

$("button").click(function() {

    $("div[id^=n]").each(function() {
        id = $(this).attr('id');
        width = String(id.charAt(1) * 10) + "%";
        $(this).animate({width: width}, 500, complete);
    });

});

提琴是here：