39

我目前正在尝试设置一个包含 6 个可单击 cel 的表格，该表格允许出现一个输入框，以便您可以添加评论，但我收到重复的 jQuery 选择器错误，并且通过调试我的第二个函数，我发现它.html()也不起作用。这是我的 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");。

4

4 回答 4

99

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

jQuery 文档摘录：

保存选择

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

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

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

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

但是，在您的代码中没有重复的 jQuery 选择，所以我敢打赌，警告来自其他地方。这与添加缺少的$.

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

于 2014-01-28T16:29:44.787 回答
12

“重复选择器”确实是一个 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 和驼峰式引用选择器更容易。

于 2017-01-10T22:32:18.100 回答
3

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

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

由于某种原因，错误被抛出"#checkbox"。我通过包括以下内容解决了这个问题：

//noinspection JSJQueryEfficiency在这样的声明的顶部if：

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

并且错误消息消失了。

于 2014-06-03T05:31:57.430 回答
2 
Duplicate jQuery Selector

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

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

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

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

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

于 2020-01-16T15:04:55.927 回答