javascript - Use selected element when selector allow for multiple options

Question

抱歉，如果我的标题难以理解。

我有多个名为 date1、date2 的字段...在更改这些字段时，我希望运行完整的脚本。今天，我只是简单地复制了每个 dateN 的代码。

我想要一个更简洁的代码并使用下一个 JQuery 选择器:

$("input[id^=date]")

我面临的问题是我不知道如何将选中的元素重用到后续代码中。我试过 $(this) 但它不起作用，因为它似乎未定义。

编辑:根据要求，我用 $(this) 展示了一个例子。变量 day 保持为空。如果我使用与月份和年份相同的选择器，它就会起作用。完整的示例还没有使用 $(this)，但它是为了表明我的 $(this) 不起作用。

$("#date1").on("change", () => {
      // Check validity of the date
      const regexDate = /\d{2}\/\d{2}\/\d{4}/gm;
      if (regexDate.test($("#date1").val()) == false) {
        // Date format not valid, we quit the function
        $("#info1").removeAttr("title");
        $("#info1").hide();
        return;
      }

      //Slice date
      var day = $(this).val().substring(0, 2);
      var month = $("#date1").val().substring(3, 5);
      var year = $("#date1").val().substring(6, 10);

      $.get("http://192.168.1.6:3000/getDateHistory/" + day + "/" + month + "/" + year, (data) => {
        data = JSON.parse(data);
        // Only display if not empty
        if (data.length > 0) {
          historyOfSameDate = "Other records exist at the same date: ";
          for (var i = 0; i < data.length; i++) {
            historyOfSameDate += data[i].desc + " - " + data[i].amount;
            if (i < data.length - 1) {
              historyOfSameDate += " | "
            };
          }
          $("#info1").attr({
            "title": historyOfSameDate
          });
          $("#info1").show();
        } else {
          $("#info1").removeAttr("title");
          $("#info1").hide();

        }
      });

<tr>
  <td><input class="form-control datepicker" id="date1" placeholder="Enter date"></td>
  <td style="vertical-align:middle;"><i id="info1" class="bi bi-info-square-fill"></i></td>
  <td>
    <select class="form-control" id="type1" placeholder="Enter type">
      <option value=""></option>
    </select>
  </td>
  <!-- Options dynamically created -->
  <td><input class="form-control" id="desc1" placeholder="Enter description"></td>
  <td><input class="form-control" id="amount1" placeholder="Enter amount"></td>
  <td>
    <select class="form-control" id="payer1" placeholder="Enter type">
      <option value=""></option>
    </select>
  </td>
  <!-- Options dynamically created -->
  <td>
    <select class="form-control" id="paymentsource1" placeholder="Enter type">
      <option value=""></option>
    </select>
  </td>
  <!-- Options dynamically created -->
  <td style="vertical-align:middle; color:orange;"><i id="warning1" class="bi bi-exclamation-triangle-fill" title="This record will be ignored because it either doesn't contain enough information or contains error(s)."></i></td>
</tr>
<tr>
  <td><input class="form-control datepicker" id="date2" placeholder="Enter date"></td>
  <td style="vertical-align:middle;"><i id="info2" class="bi bi-info-square-fill"></i></td>
  <td>
    <select class="form-control" id="type2" placeholder="Enter type">
      <option value=""></option>
    </select>
  </td>
  <!-- Options dynamically created -->
  <td><input class="form-control" id="desc2" placeholder="Enter description"></td>
  <td><input class="form-control" id="amount2" placeholder="Enter amount"></td>
  <td>
    <select class="form-control" id="payer2" placeholder="Enter type">
      <option value=""></option>
    </select>
  </td>
  <!-- Options dynamically created -->
  <td>
    <select class="form-control" id="paymentsource2" placeholder="Enter type">
      <option value=""></option>
    </select>
  </td>
  <!-- Options dynamically created -->
  <td>

谢谢

Answer 1

差异

“我试过 $(this) 但它不起作用，因为它似乎未定义。”

箭头函数无法识别 this您需要使用命名函数或匿名函数。此外，还有第二个参数接受指定 this 的选择器。 :

// Named Function
$(selector).on(event, ".thisClassWillBeTHIS", functionName);
function functionName(e) {...

// Anonoymous Function 
$(selector).on(event, "input", function(e) {...
// "input" means any `<input>` in selector

在下面的例子中，next()没有像您预期的那样使用，事实上，.next()仅用于演示目的。 .next()如果应用于 <input> ( this ) 不会跳转到下一个单元格 ( <td> )——您需要遍历出 this 的单元格然后使用 .next()然后使用 .find()等等。

与其遍历一行的每个单元格，不如利用所有这些 #id s(尽管我不鼓励在大多数情况下使用 #id)。每个#id除了数字之外，所有东西都是一样的，所以你可以得到 #id的 this并剥离数字并将其存储在变量中以连接到该行中的其他元素:

const set = this.id.match(/\d{1,2}/g).toString();
$('#info'+set).attr('title')

<table>包裹在 <form> 中并且事件处理程序绑定(bind)到 <form> .关于祖先<form>元素并使用表单事件(“更改”)可以通过使用 event delegation 为您提供更多控制权和 HTMLFormElement interface 这是一个普通的 JavaScript 接口(interface)，具有简洁的语法和特殊功能(可选，如果您需要它，它会在那里):

$('form').on('change', ...

<output>放在每个 #info* 之后显示消息，因为我不知道为什么 "title"正在使用属性(即使用 .next() 的位置)。

OP 代码所剩无几，因为大多数都有未包含的依赖项(也不需要)。他所做的大部分更改都是为了演示目的，您应该保留的唯一内容是:

$('form').on('change', '.datepicker', function(e) {
  const set = this.id.match(/\d{1,2}/g).toString();
  /* Replace `$('info1') with... */
  $("#info" + set)

然后包装 <table>在<form>如果你还没有。顺便说一句，如果你添加 type="date" 至 .datepicker它会神奇地变成一个真正的日期选择器，并且不需要日期检查。

例子

const display = D => {
  const options = {
    weekday: 'long',
    year: 'numeric',
    month: 'long',
    day: 'numeric'
  };
  return new Intl.DateTimeFormat('en-US', options).format(D);
};

$("form").on("change", '.datepicker', function(e) {

  const set = this.id.match(/\d{1,2}/g).toString();

  const regexDate = /\d{2}\/\d{2}\/\d{4}/g;

  if ($(this).val() == '') {
    $("#info" + set).next().html('');
    return;
  }

  if (regexDate.test($(this).val()) == false) {
    $("#info" + set).next().html(`<b>Invalid Date</b>`);
    return;
  }
  const date = new Date($(this).val());

  $("#info" + set).next().html(`<time>${display(date)}</time>`);
});

<form>
  <table>
    <tr>
      <td><input class="form-control datepicker" id="date1" placeholder="MM/DD/YYYY"></td>
      <td style="vertical-align:middle;"><i id="info1" class="bi bi-info-square-fill"></i>
        <output></output>
      </td>
      <td>
        <select class="form-control" id="type1" placeholder="Enter type">
          <option value=""></option>
        </select>
      </td>
      <td><input class="form-control" id="desc1" placeholder="Enter description"></td>
      <td><input class="form-control" id="amount1" placeholder="Enter amount"></td>
      <td>
        <select class="form-control" id="payer1" placeholder="Enter type">
          <option value=""></option>
        </select>
      </td>
      <td>
        <select class="form-control" id="paymentsource1" placeholder="Enter type">
          <option value=""></option>
        </select>
      </td>
      <td style="vertical-align:middle; color:orange;"><i id="warning1"></i></td>
    </tr>
    <tr>
      <td><input class="form-control datepicker" id="date2" placeholder="MM/DD/YYYY"></td>
      <td style="vertical-align:middle;"><i id="info2" class="bi bi-info-square-fill"></i>
        <output></output>
      </td>
      <td>
        <select class="form-control" id="type2" placeholder="Enter type">
          <option value=""></option>
        </select>
      </td>
      <td><input class="form-control" id="desc2" placeholder="Enter description"></td>
      <td><input class="form-control" id="amount2" placeholder="Enter amount"></td>
      <td>
        <select class="form-control" id="payer2" placeholder="Enter type">
          <option value=""></option>
        </select>
      </td>
      <td>
        <select class="form-control" id="paymentsource2" placeholder="Enter type">
          <option value=""></option>
        </select>
      </td>
    </tr>
  </table>
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>