Question

我目前正在为我的网站开发一个postIt，按下加号按钮会创建一个可编辑的帖子/便签。我现在已完成该部分，但我正在努力处理下一部分，它将粘滞便笺的数量限制为4.我尝试使用一个全局变量作为计数器，所以当计数器为3时，它应该停止创建更加粘滞便笺，但不幸的是，它不起作用。

这是我可行代码的链接： Sticky note

这是我徒劳的尝试将粘滞便笺的数量限制为4。

$("#create").click(function(){
var count = 0;
if( count < 4){
    $("#create").click(function() {
    $(this).before("<textarea></textarea>");
    }); 
    count++;
          }
}

有谁能请指点如何将音符限制为4？我现在一直在努力。

Answer 1

只需将var count = 0;移到事件侦听器之外，然后删除内部事件侦听器：

var count = 0;                                       // outside the scope of the event listener function bellow so it won't get destroyed/recreated each time the function get called (ie when a clicks happen)
$("#create").click(function() {
    if(count < 4) {                                  // we haven't yet exceeded the limits
        $(this).before("<textarea></textarea>");     // don't attach another click event listener on #create (we are already in one) so just create the note.
        count++;
    }
});

Answer 2

每次点击“创建”，计算textarea个元素的数量，然后确定是否应该创建一个新元素：

$("#create").click(function() {
    var count = $("textarea");
    if (count.length < 4) {
        $(this).before("<textarea></textarea>");
    }
});

您甚至可以在新创建的class中添加textarea，以确保您只计算此功能创建的内容。

HTML：

<textarea>This is not part of the group.</textarea>

<textarea class="sticky">This is a sticky note you can type and edit.</textarea>

<div id="create">+</div>

JS：

$("#create").click(function() {
  var count = $("textarea.sticky");
  if (count.length < 4) {
      $(this).before("<textarea class='sticky'></textarea>");
  }
});

Answer 3

问题是您在count事件处理程序中定义了click变量。因此，每次单击该元素时，计数器都会重置。您也不应该在主要部分中使用辅助点击处理程序。

要解决此问题，请将count变量置于点击处理程序之外：

var count = 0;
$("#create").click(function() {
    if (count < 3) {
        $(this).before("<textarea></textarea>");
        count++;
    }
});

请注意，条件应检查count是否小于 3 ，因为它会在创建后增加计数。如果设置为检查计数是否小于4，则会创建五个注释。

为了在创建第四个元素后隐藏+，您可以使用：

if (count == 3) {
  $(this).hide();
}

增加计数后。

可以看到工作here。

希望这有帮助！：）

设置注释创建次数的限制

3 个答案: