jQuery 重复选择器错误

Question

我目前正在尝试设置一个包含 6 个可点击的单元格的表格，该表格允许出现一个输入框，以便您可以添加注释，但我收到了重复的 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 等上遇到重复选择器错误。是否有什么我遗漏或错误地做错的事情？第一个单元格可以工作，我可以单击它，然后会弹出一个输入框，但在 tuesday.htmls.html("test");< 行的第二个单元格 #tuesdayCommentLink 上失败.

Answer 1

不存在这样的重复的jQuery选择器错误；这是 IntelliJ(以及 WebStorm 等来自 idea 的其他 IDE...)发出的警告，建议您应该将 jQuery 选择存储在本地变量中，而不是重复选择。

摘自jQuery documentation :

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

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