jQuery重复选择器错误 [英] jQuery Duplicate Selector error

问题描述

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

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:

$("#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");.

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 #tuesdayCommentLink at the line tuesday.htmls.html("test");.

推荐答案

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

There is no such a Duplicated jQuery Selector error; 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.

摘自jQuery 文档:

保存选择

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

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" );

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

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.

选择只获取做出选择时页面上的元素.如果稍后将元素添加到页面，则必须重复选择或将它们添加到存储在变量中的选择中.DOM 更改时，存储的选择不会神奇地更新.

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 选择，所以我敢打赌，警告来自其他地方.这与添加缺少的 $ 后错误仍然存​​在的事实相符.

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

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

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

这篇关于jQuery重复选择器错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！