Question

我正在尝试增加div元素中每个数据属性的延迟。

查看我的代码 JQUERY

jQuery(document).ready(function($) {
    var Column = [], startDelayTime, counter;
    Column = $('.col-outside');
    startDelayTime = 300;
    addDelayTime = 25;

    for(var i = 0; i < Column.length; i++) {
        Column.attr('data-sal-delay', startDelayTime + addDelayTime[i]);
    }
});

HTML：

<div class="col-md-3 col-outside" data-sal="slide-right" data-sal-easing="ease-out-bounce" data-sal-delay="300">

希望有人可以向我解释我在做什么错，或者我必须做什么。

Answer 1

循环中的逻辑需要看起来像这样。我删除了JQuery逻辑以简化示例。

var currentDelay = 300;
var addDelayTime = 25;

for(var i = 0; i < 10; i++) {
    // Column.attr('data-sal-delay', currentDelay);
    console.log(currentDelay);
    currentDelay += addDelayTime;
}

Answer 2

您的代码有一些问题。

在循环中，您需要使用Column[i]访问单列节点以设置属性。
attr()是jQuery方法，因此您需要在$(Column[i]).attr(name, value)之类的jQuery选择中使用它。或者，您可以像Column[i].setAttribute(name, value)一样使用JavaScript方法setAttribute
addDelayTime是一个整数，因此addDelayTime[i]未定义。您要在此处执行的操作是将当前数组索引乘以addDelayTime。 addDelayTime * i

在此示例中，我修复了以上3个问题，我使用jQuery的each遍历各列，而不是for循环。

jQuery(document).ready(function($) {
  var startDelayTime = 300;
  var addDelayTime = 25;

  $.each($(".col-outside"), function(index, item) {
    $(item).attr("data-sal-delay", startDelayTime + index * addDelayTime);
  });
});

.col-outside::after {
  content: attr(data-sal-delay);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="col-outside"></div>
<div class="col-outside"></div>
<div class="col-outside"></div>
<div class="col-outside"></div>
<div class="col-outside"></div>

Answer 3

这将起作用：您需要在delayStart上乘以i才能获得理想的效果。

$(function() {
    var Column = [], startDelayTime, counter;
    Column = $('.col-outside');
    startDelayTime = 300;
    addDelayTime = 25;

    Column.each(function(i, c){
        $(c).attr('data-sal-delay', startDelayTime+ (addDelayTime*i));
    });
});

Answer 4

您需要做两件事：

在循环中使用当前列（Column[i]，而不是Column）。
每次循环迭代时，递增startDelayTime的值。

这是您编辑的代码：

jQuery(document).ready(function($) {
    var Column = [], startDelayTime, counter;
    Column = $('.col-outside');
    startDelayTime = 300;
    addDelayTime = 25;

    for(var i = 0; i < Column.length; i++) {
        Column[i].attr('data-sal-delay', startDelayTime + addDelayTime);
        startDelayTime += addDelayTime;
    }
});

现在您的代码应该可以使用了。希望这会有所帮助！

jQuery尝试增加每个孩子的数据延迟

4 个答案: