Question

以下代码不起作用：

$(".countdown").circularCountdown({

    startDate:$(this).attr('data-start'),
    endDate:$(this).attr('data-end'),
    timeZone:$(this).attr("timezone")

});

下面的一个正常，

$(".countdown").circularCountdown({

    startDate:$(".countdown").attr('data-start'),
    endDate:$(".countdown").attr('data-end'),
    timeZone:$(".countdown").attr("timezone")

});

我不明白，不是$（this）引用“.countdown”因为我在这个元素上调用函数？有人可以帮帮我吗？

Answer 1

由于this未引用countdown，因此一种解决方案是使用each()

$(".countdown").each(function () {
    $(this).circularCountdown({
        startDate: $(this).attr('data-start'),
        endDate: $(this).attr('data-end'),
        timeZone: $(this).attr("timezone")
    });
})

Answer 2

$（this）通常绑定到一个被点击，悬停等元素。我相信你必须指定或选择具有“数据开始”的元素。在使用$（this）选择器之前的属性。您能否提供有关如何运行此功能和html结构的更多信息？

Answer 3

你没有调用函数，你正在调用一个插件。所以你写的json参数不知道对象是什么。我非常同意Arun P Johny的说法。如果你想深入了解，可以在插件中更改这些值

 startDate: $(this).attr('data-start'),
 endDate: $(this).attr('data-end'),
 timeZone: $(this).attr("timezone")

它会起作用：）

Answer 4

在你的对象初始化器中，“this”指的是当前正在执行的函数的执行上下文，这是你调用circularCountdown的函数，或者（这是我认为最有可能的情况）如果调用不在函数内，则默认为全局上下文。

您可以像这样解决问题：

 $(".countdown").each(function() {

       var start = $(this).attr('data-start'),
              end = $(this).attr('data-end'),
              time = $(this).attr("timezone");

       $(this).circularCountdown({
            startDate: start,
            endDate: end,
            timeZone: time
      });

 });

jQuery的每个方法都允许您传入一个函数来依次初始化每个元素，并通过“this”访问当前正在初始化的元素。

Answer 5

您正在（几乎）同时执行$(".countown")和$(this)。因此，this指向您调用$(".countown")

时指向的内容

视觉示例

var currentThis = this;
$(".countdown").circularCountdown({

    startDate:$(this).attr('data-start'), // "this" is the same as "currentThis"
    endDate:$(this).attr('data-end'),
    timeZone:$(this).attr("timezone")

});

您可能正在考虑传递回调的jQuery函数。在这种情况下，jQuery在回调中设置this以指向调用该函数的对象。就像Arun mentioned with $.each

一样

另一种解决方案是将其保存到变量中，您不希望四次运行相同的查询。

var ctDown = $(".countdown");
ctDown.circularCountdown({    
    startDate: ctDown.attr('data-start'),
    endDate: ctDown.attr('data-end'),
    timeZone: ctDown.attr("timezone")

});

JQuery $（this）不在函数参数内部工作

5 个答案: