javascript - 这个 JavaScript 如何工作？

Question

当我使用时，此功能如何适用于所有文本框

$('#date, #date2').blur(function () {

但不是当我使用

$('#date').blur(function () {?

MVC 查看器：

@Html.TextBoxFor(x => x.ArrivalDateStart, new { id = "date" })
@Html.TextBoxFor(x => x.ArrivalDateEnd, new { id = "date" })
@Html.TextBoxFor(x => x.OtherDateEnd, new { id = "date" })
@Html.TextBoxFor(x => x.OtherDateEnd, new { id = "date" })

Javascript：

$(function () {
    $('#date, #date2').blur(function () {
        var date = $(this).val();
        var result = "";
        if (date.length === 8) {
            result = result += date.substring(0, 4) + "-" + date.substring(4, 6) + "-" + date.substring(6, 8);
            $(this).val(result);
            $(this).blur()
        }
    });
});

Answer 1

您的元素应该具有唯一的 ID。将其转换为类属性而不是 ID 属性：

@Html.TextBoxFor(x => x.ArrivalDateStart, new { @class = "date" })

并像这样选择它：

$('.date').blur(function () {

Answer 2

首先，一个元素的 id 必须是唯一的，因此您不能只给new { id = "date" }所有元素。但是你可以给他们相同的类new { @class = "date" }名，当你将选择器更改为“.date”时，它应该可以解决问题。

Answer 3

对于超过 1 个元素，您不能拥有相同的 id！如果您设置像 date1, date2, date3, ... 这样的 ID，您可以制作如下选择器：

$('textarea[id^="date"]')