jQuery重复选择器错误

Question

我目前正在尝试设置一个包含6个可点击的cels的表,允许输入框出现,这样你就可以添加注释但是我得到了一个重复的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");.

Answer 1

没有这样的Duplicated jQuery Selector错误; 这是IntelliJ(以及像WebStorm这样的想法的其他IDE)抛出的警告,表明你应该将jQuery选择存储在局部变量中,而不是重复选择.

摘自jQuery文档:

保存选择

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

Duplicate jQuery Selector

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

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

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

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

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