jQuery重复选择器错误

Question

我目前正在尝试设置一个包含 6 个可点击 cel 的表格，允许出现一个输入框，以便您可以添加 cmets，但我收到重复的 jQuery 选择器错误，并且通过调试我的第二个函数，我发现 @987654321 @ 也不起作用。这是我的 6 个函数的代码；单击特定单元格时会调用每个函数：

$("#mondayCommentLink").click(function (){
    var mondayhtmls = $("#mondayComment");
    var input = $("<input type='text' id='mondayCommentText' name='mondayCommentText'  />");
    input.val(data.days[0].comment);
    mondayhtmls.html(input);
});

$("#tuesdaysCommentLink").click(function (){
    var tuesdayhtmls = ("#tuesdayComment");
    var inputt = $("<input type='text' id='tuesdayCommentText' name='tuesdayCommentText' />");
    inputt.val(data.days[1].comment);
    tuesdayhtmls.html("test");
});

$("#wednesdayCommentLink").click(function (){
    var htmls = ("#wednesdayComment");
    var input = $("<input type='text' id='wednesdayCommentText' name='wednesdayCommentText' />");
    input.val(data.days[2].comment);
    htmls.html(input);
});

$("#thursdayCommentLink").click(function (){
    var htmls = ("#thursdayComment");
    var input = $("<input type='text' id='thursdayCommentText' name='thursdayCommentText' />");
    input.val(data.days[3].comment);
    htmls.html(input);
});

$("#fridayCommentLink").click(function (){
    var htmls = ("#fridayComment");
    var input = $("<input type='text' id='fridayCommentText' name='fridayCommentText' />");
    input.val(data.days[4].comment);
    htmls.html(input);
});

$("#saturdayCommentLink").click(function (){
    var htmls = ("#saturdayComment");
    var input = $("<input type='text' id='saturdayCommentText' name='saturdayCommentText' />");
    input.val(data.days[5].comment);
    htmls.html(input);
});

这是调用它们的地方：

  <th id="mondayComment" name="mondayComment" style="text-align: center; width: 115px;"><div id="mondayCommentLink">+</div></th>
  <th id="tuesdayComment" name="tuesdayComment" style="text-align: center; width: 115px;"><div id="tuesdaysCommentLink">+</div></th>
  <th id="wednesdayComment" name="wednesdayComment" style="text-align: center; width: 115px;"><div id="wednesdayCommentLink">+</div></th>
  <th id="thursdayComment" name="thursdayComment" style="nowrap; text-align: center; width: 115px;"><div id="thursdayCommentLink">+</div></th>
  <th id="fridayComment" name="fridayComment" style="text-align: center; width: 115px;"><div id="fridayCommentLink">+</div></th>
  <th id="saturdayComment" name="saturdayComment" style="text-align: center; width: 115px;"><div  id="saturdayCommentLink">+</div></th> 

我不明白为什么我在#mondayCommentLink、#tuesdayCommentLink 等处收到重复的选择器错误。我是否遗漏了什么或错误地做错了什么？第一个单元格有效，我可以单击它，然后会弹出一个输入框，但它在第二个单元格 #tuesdayCommentLink 的行 tuesday.htmls.html("test"); 上失败。

Answer 1

没有这样的Duplicated jQuery Selector错误；这是 IntelliJ（以及来自诸如 WebStorm 等想法的其他 IDE）发出的警告，建议您应该将 jQuery 选择存储在局部变量中，而不是重复选择。

摘自jQuery documentation：

保存选择

jQuery 不会为您缓存元素。如果您做出了可能需要再次进行的选择，则应将选择保存在变量中，而不是重复进行选择。

1| var divs = $( "div" );

一旦选择存储在变量中，您就可以在变量上调用 jQuery 方法，就像在原始选择中调用它们一样。

选择仅获取在进行选择时页面上的元素。如果稍后将元素添加到页面中，您将不得不重复选择或以其他方式将它们添加到存储在变量中的选择中。 DOM 更改时，存储的选择不会神奇地更新。

但是，在您的代码中没有重复的 jQuery 选择，所以我敢打赌，警告来自其他地方。这与添加缺少的 $ 后错误仍然存​​在这一事实相符。

一般来说，将报告的错误添加到您的问题中是一种很好的做法。

Answer 2

“重复选择器”确实是 JS lint 警告，您会在 PHPStorm / WebStorm 等 IDE 中看到。出于性能原因，您需要尽可能缓存您的选择器。例如：

(function($) {
  var 
    $mondayCommentLink = $("#mondayCommentLink"),
    $mondayHtmls = $("#mondayComment"),
    $inputMonday = $("<input type='text' id='mondayCommentText' name='mondayCommentText'  />");

    $mondayCommentLink.on('click', function() {
      $inputMonday.val(data.days[0].comment);
      $mondayHtmls.html($inputMonday);
    });

})(jQuery);

.. 等等。我刚刚在星期一做了，但您将继续添加对选择器的变量引用，您可以抓取它已经在内存中。处理 AJAX 或如果您有多个作用域时，事情会稍微复杂一些，但这是基本思想。这只是惯例，但我发现使用 var $elem 和 camelcased 引用选择器更容易。

Answer 3

我在尝试这样的事情时遇到了同样的错误：

if  ($("#checkbox").is(':checked')){
   value = $("#checkbox").val();

由于某种原因，在"#checkbox" 上引发了错误。我解决了这个问题，包括：

//noinspection JSJQueryEfficiency 在if 语句的顶部，如下所示：

 //noinspection JSJQueryEfficiency
 if  ($("#checkbox").is(':checked')){
   value = $("#checkbox").val();

错误消息消失了。

Answer 4

Duplicate jQuery Selector

是来自 JSHint 的警告或提示。这不是错误。

如果您在 JavaScript 或 jQuery 中多次选择一个 DOM 元素而没有代码块，则会显示此警告。

为获得最佳实践，您应该将其分配给如下变量：

let $myInput = jQuery('.first-name');

这样，您可以使用 $myInput 获取更多代码。