工作示例Here

Question

我对Javascript很新，我试着写一些比较两个日期的jquery。如果比较的天数小于或等于数字，那么我希望将一些类添加到名为LI的父级的.momentum-container子元素中。

当脚本在一个DIV容器上运行时，它按预期工作，问题是当我添加其他DIV容器时。我试图调用一个函数来读取.momentum-container的内容并运行脚本，找到下一个.momentum-container并执行相同操作。相反，它看起来只是读取第一个容器的内容，并重复结果。

在小提琴中你可以看到两排7个小节。顶行应该有7个条，底行应该只有3个条。而是有两行7。

非常感谢任何帮助！

http://jsfiddle.net/j1qs3gr0/14/

// prototype to compare two dates
Date.prototype.DaysBetween = function () {
    var intMilDay = 24 * 60 * 60 * 1000;
    var intMilDif = arguments[0] - this;
    var intDays = Math.floor(intMilDif / intMilDay);
    return intDays;
};

today = 12 + '/' + 17 + '/' + 2014;

// function that calculates the momentum

function calcMomentum(currentPost, olderPost) {
    var current = $(currentPost).val();
    var older = $(olderPost).val();
    var todayD = new Date(today);
    var postD = new Date(current);
    var otherD = new Date(older);

// compare dates
    var resistance = (postD.DaysBetween(todayD));
    var movement = (otherD.DaysBetween(postD));
    var momomentum = (resistance + movement);

// function uses the above variables to apply classes if condition is met
    $(".momentum").each(function () {
        if (momomentum <= 6) {
            $(this).children("li.two").addClass("level-two");
        }

        if (momomentum <= 5) {
            $(this).children("li.three").addClass("level-three");
        }

        if (momomentum <= 4) {
            $(this).children("li.four").addClass("level-four");
        }

        if (momomentum <= 3) {
            $(this).children("li.five").addClass("level-five");
        }

        if (momomentum <= 2) {
            $(this).children("li.six").addClass("level-six");
        }

        if (momomentum <= 1) {
            $(this).children("li.seven").addClass("level-seven");
        }

    });

}

$(".momentum-container").each(function () {
    calcMomentum(".js-post-date", ".js-older-date");
});

Answer 1

当有多个元素时，你应该总是迭代父元素。

试试这个：

工作示例Here

// prototype to compare two dates
Date.prototype.DaysBetween = function () {
    var intMilDay = 24 * 60 * 60 * 1000;
    var intMilDif = arguments[0] - this;
    var intDays = Math.floor(intMilDif / intMilDay);
    return intDays;
};

today = 12 + '/' + 17 + '/' + 2014;

// function that calculates the momentum
function calcMomentum(currentPost, olderPost, parent) {

    var current = $(currentPost,parent).val();
    var older = $(olderPost,parent).val();
    var todayD = new Date(today);
    var postD = new Date(current);
    var otherD = new Date(older);

    // compare dates
    var resistance = (postD.DaysBetween(todayD));
    var movement = (otherD.DaysBetween(postD));
    var momomentum = (resistance + movement);

    // function uses the above variables to apply classes if condition is met
    $(".momentum",parent).each(function () {

        if (momomentum <= 6) {

            $(this).children("li.two").addClass("level-two");
        }

        if (momomentum <= 5) {
            $(this).children("li.three").addClass("level-three");
        }

        if (momomentum <= 4) {
            $(this).children("li.four").addClass("level-four");
        }

        if (momomentum <= 3) {
            $(this).children("li.five").addClass("level-five");
        }

        if (momomentum <= 2) {
            $(this).children("li.six").addClass("level-six");
        }

        if (momomentum <= 1) {
            $(this).children("li.seven").addClass("level-seven");
        }

    });

}

$(".momentum-container").each(function () {
    calcMomentum(".js-post-date", ".js-older-date", $(this));
});

Jquery如何在多个地方运行一个函数

1 个答案:

工作示例Here