jQuery jQuery重复选择器错误

jQuery Duplicate Selector error

提问by thehoule64

I am currently trying to set up a table with 6 clickable cels that allow for a input box to appear so you can add comments but I am getting a duplicated jQuery selector error and also through debugging my second function I found that .html()is not working either. Here is my code for the 6 functions; each of which are called when a specific cell is clicked:

我目前正在尝试设置一个包含 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);
});

And this is where they are called from:

这就是他们被调用的地方：

  <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> 

I don't understand why I am getting a duplicate selector error on #mondayCommentLink, #tuesdayCommentLink, etc. Is there something I'm missing or mistakenly doing wrong? The first cell works and I can click it and a input box will pop up but it fails upon the second cell #tuesdayCommentLinkat the line tuesday.htmls.html("test");.

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

回答by aebmad

There is no such a Duplicated jQuery Selectorerror; that's a warning thrown by IntelliJ (and other IDEs from idea like WebStorm...) suggesting that you should store your jQuery selection in a local variable rather than repeating the selection.

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

Excerpt from jQuery documentation:

jQuery 文档摘录：

Saving Selections

jQuery doesn't cache elements for you. If you've made a selection that you might need to make again, you should save the selection in a variable rather than making the selection repeatedly.

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

Once the selection is stored in a variable, you can call jQuery methods on the variable just like you would have called them on the original selection.

A selection only fetches the elements that are on the page at the time the selection is made. If elements are added to the page later, you'll have to repeat the selection or otherwise add them to the selection stored in the variable. Stored selections don't magically update when the DOM changes.

保存选择

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

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

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

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

However, in your code there is no duplicated jQuery selection so I bet that warning is coming from somewhere else.. What is in line with the fact that the error persists after adding the missing $.

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

In general is a good practice to add the reported error to your questions..

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

回答by JDev518

The "duplicate selector" is indeed a JS lint warning, that you'll see in IDEs like PHPStorm / WebStorm. For performance reasons, you'll want to cache your selectors whenever possible.. e.g.:

“重复选择器”确实是一个 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);

.. and so on. I just did Monday, but you'd continue to add a variable reference to the selector that you can grab that's already in memory. Things are a bit more complicated when dealing with AJAX or if you have multiple scopes, but this is the basic idea. It's just convention, but I find it easier to reference selectors with var $elem and camelcased.

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

回答by Ojonugwa Jude Ochalifu

I had this same error trying something like this:

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

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

For some reason, the error was thrown on "#checkbox". I solved the problem by including:

出于某种原因，错误被抛出"#checkbox"。我解决了这个问题，包括：

//noinspection JSJQueryEfficiencyat the top of the ifstatement like this:

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

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

and the error message went away.

错误信息消失了。

回答by Gideon Babu

Duplicate jQuery Selector

is a warning or hint from JSHint. It is not an error.

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

If you select a DOM element multiple times without a block of code in JavaScript or jQuery, this warning is shown.

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

For best practice, you should assign it to a variable like this:

为了最佳实践，您应该将其分配给这样的变量：

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

in that way, you can use $myInput for further codes.

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