Question

我将jquery datepicker应用于具有类txt-date的输入元素：

 $('.txt-date').datepicker({
    showAnim: "blind",
    changeMonth: true,
    changeYear: true,
    dateFormat: "dd.mm.yy",
    numberOfMonths: 2
});

如你所见，我指定显示2个月。但这不是我想要的所有输入字段的行为。为了使其更灵活，我想根据自定义属性（类似numberOfMonths）值确定data-shown-months属性的值。我尝试通过$(this)访问输入元素，就像这样

<input type="text" class="txt-date" data-shown-months="2"/>

     $('.txt-date').datepicker({
    showAnim: "blind",
    changeMonth: true,
    changeYear: true,
    dateFormat: "dd.mm.yy",
    numberOfMonths: $(this).data('shown-months')
});

但这不起作用。我也尝试了$(this).attr('data-shown-months')，以确保它不是jquery data函数的问题。似乎$(this)指的是日期选择器本身。至少它没有引用源输入元素。你知道我将如何访问源输入元素吗？

Answer 1

this指的是this拨打datepicker()时的window（可能是this）。在对象参数中放置$('.txt-date').datepicker({ numberOfMonths: $('.txt-date').data('shown-months') //"this" is probably window });不会改变其上下文。

更改为：

this

如果你有多个带有“txt-date”类的元素，每个元素都有自己的“显示月份”值，你可以在 each() 循环中初始化它们。在这种情况下，$('.txt-date').each(function() { $(this).datepicker({ numberOfMonths: $(this).data('shown-months') //"this" is the current element }); });将指向每个元素：

{{1}}

Answer 2

this始终引用正在运行的代码的所有者/调用者。由于您的代码直接在页面中运行，因此所有者是window对象。

如果您将代码包含在属于input的事件中，则this会引用input，因为它是该事件的所有者：

$('.txt-date').one("focusin", function() {
  $(this).datepicker({
    showAnim: "blind",
    changeMonth: true,
    changeYear: true,
    dateFormat: "dd.mm.yy",
    numberOfMonths: $(this).data("shown-months"),
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<input type="text" class="txt-date" data-shown-months="1" value="1-month datepicker" />
<input type="text" class="txt-date" data-shown-months="2" value="2-months datepicker" />

Rick的答案显然更简单，但我只想解释this如何运作以及如何使用它来达到你想要的效果。

如何访问应用了datepicker的输入

2 个答案: