39

現在、コメントを追加できるように入力ボックスを表示できる6つのクリック可能なセルを含むテーブルをセットアップしようとしていますが、重複したjQueryセレクターエラーが発生し、2番目の関数をデバッグすることでも機能して.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、行の 2 番目のセルで失敗しますtuesday.htmls.html("test");。

4

4 に答える 4

99

Duplicated jQuery Selectorそのようなエラーはありません。これは、IntelliJ (および WebStorm などのアイデアからの他の IDE) によってスローされる警告であり、選択を繰り返すのではなく、jQuery の選択をローカル変数に格納する必要があることを示唆しています。

jQuery ドキュメントからの抜粋:

選択の保存

jQuery は要素をキャッシュしません。もう一度行う必要がある選択を行った場合は、選択を繰り返し行うのではなく、変数に選択を保存する必要があります。

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

選択が変数に格納されると、元の選択で呼び出した場合と同じように、変数で jQuery メソッドを呼び出すことができます。

選択は、選択が行われた時点でページ上にある要素のみをフェッチします。要素が後でページに追加された場合は、選択を繰り返すか、変数に格納されている選択に要素を追加する必要があります。保存されたセレクションは、DOM が変更されたときに魔法のように更新されることはありません。

ただし、コードには重複したjQueryの選択がないため、警告が別の場所から来ているに違いありません..欠落している$.

一般に、報告されたエラーを質問に追加することをお勧めします。

于 2014-01-28T16:29:44.787 に答える
12

「重複セレクター」は実際には 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 を使用してセレクターを参照する方が簡単だと思います。

于 2017-01-10T22:32:18.100 に答える
3

次のようなことをしようとすると、同じエラーが発生しました。

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

何らかの理由で、エラーがスローされました"#checkbox"。以下を含めることで問題を解決しました。

//noinspection JSJQueryEfficiencyifこのようなステートメントの上部に：

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

エラーメッセージは消えました。

于 2014-06-03T05:31:57.430 に答える