Question

我目前正在尝试设置一个包含6个可点击的cels的表，允许输入框出现，这样你就可以添加注释但是我得到了一个重复的jQuery选择器错误，并且通过调试我的第二个函数，我发现{{ 1}}也不起作用。这是我的6个函数的代码;在单击特定单元格时调用每个单词：

.html()

这就是他们的名字来源：

$("#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上失败。

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"引发了错误。我通过包括：

解决了这个问题 {p} //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用于更多代码。

jQuery重复选择器错误

4 个答案: