Question

使用此javascript可以通过单击“添加”选项添加任意数量的文本字段。我想停止显示添加选项添加6个文本字段后。我怎么能在6点后限制它？有什么帮助吗？

＆＃13;

SELECT CASE WHEN Col1=0 THEN COL2 ELSE Col1 END

＆＃13;

$('.add').click(function() {
      $('.block:last').before(' <div class="block"><input type="text" /><span 
        class = "remove" > Remove Option < /span></div > ');
      });

    $('body').on('click', '.remove', function() {
      $(this).parent('.block').remove();
    });

＆＃13;

.block {
  display: block;
}

enter code here input {
  width: 50%;
  display: inline-block;
}

span {
  display: inline-block;
  cursor: pointer;
  text-decoration: underline;
}

＆＃13;

Working fiddle

Answer 1

创建一个变量，用于存储计数，在添加input时增加计数，在删除input时减少计数并相应隐藏button

$(document).ready(function() {

  var i = 0;

  $('.add').click(function() {
    if (i < 5) {
      $('.block:last').before(' <div class="block"><input type="text" /><span class="remove">Remove Option</span></div>');
    }

    i++
    hidebtn()
  });

  $('body').on('click', '.remove', function() {
    $(this).parent('.block').remove();

    i--
    hidebtn()
  });

  function hidebtn() {
    if (i >= 5) {
      $('.add').hide();
    } else $('.add').show();
  }
})

.block {
  display: block;
}

input {
  width: 50%;
  display: inline-block;
}

span {
  display: inline-block;
  cursor: pointer;
  text-decoration: underline;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="optionBox">
  <div class="block">
    <input type="text" />
  </div>
  <div class="block"> <span class="add">Add Option</span>

  </div>
</div>

Answer 2

您不需要创建任何变量。您只需使用$(".block").length来检查存在多少输入：

$('body').on('click', '.add', function() {
  if ($(".block").length <= 6) {
    $('.block:last').before(' <div class="block"><input type="text" /><span class="remove">Remove Option</span></div>');
  }

  $(".block").length > 6 ? $('.add').hide() : $('.add').show();

});

$('body').on('click', '.remove', function() {
  $(this).parent('.block').remove();
  $('.add').show();
});

.block {
  display: block;
}

input {
  width: 50%;
  display: inline-block;
}

span {
  display: inline-block;
  cursor: pointer;
  text-decoration: underline;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="optionBox">
  <div class="block">
    <input type="text" />
  </div>
  <div class="block"> <span class="add">Add Option</span>

  </div>
</div>

Answer 3

我已经更新了小提琴。请查看以下链接。 working code updated fiddle

步骤： -

使用计数器var inputs = 0;
在添加功能中增加其值。
在删除功能中减少其值。

Answer 4

我更新了你的小提琴。请查看以下内容。

https://jsfiddle.net/Negirox/9tbet1xt/5/

请更新你的js。

var counter=0;
$('.add').click(function () {
if(counter<5)
{
 $('.block:last').before(' <div class="block"><input type="text" /><span class="remove">Remove Option</span></div>');
 counter++;
}
  else
  {
   alert("You exceeded a limit");
  }
});

$('body').on('click', '.remove', function () {
  $(this).parent('.block').remove();
  counter--;
});

Answer 5

您需要使用counter变量跟踪当前的字段数量（或者更好地避免令人讨厌的全局变量。请参阅此answer）

<强> HTML

<div class="optionBox">
  <div class="block">
    <input type="text" />
  </div>
  <div id="adderButton" class="block">
     <span class="add">Add Option</span>
  </div>
</div>

<强> JS

var counter = 0;
// good to declare constants like this to avoid "magic numbers" in code
var LIMIT = 5;
$('.add').click(function () {
   if(counter < LIMIT){
     $('.block:last').before(' <div class="block"><input type="text" /><span class="remove">Remove Option</span></div>');
     counter += 1;
   }
   else {
    // dont show the option if we have exceeded the count
    $("#adderButton").hide();
   }
});

$('body').on('click', '.remove', function () {
    $(this).parent('.block').remove();
    counter -= 1;
    $("#adderButton").hide();
});

<强>更新

由于所有其他答案都为OP的问题提供了现成的解决方案。我想加强我的如何为任何感兴趣的人解决类似问题的教程。

<强>问题：

在JQuery中动态添加和删除元素达到某个限制

需要思考的要点

达到限制时，隐藏＆＃34;添加＆＃34;按钮并阻止添加更多元素
如果未达到限制，请显示添加按钮并允许添加更多

允许/禁止逻辑基于您指定的LIMIT。以下是一些场景

虽然尚未达到LIMIT，但显示“添加”选项。在计数中添加1（隐式或显式）
如果已达到LIMIT，请删除添加按钮
如果删除了一个元素，那么当前没有。元素是＆lt; LIMIT，所以显示添加选项

Answer 6

是否使用if语句和递增递减值......

＆＃13;

var count = 0;
$('.add').click(function () {
if(count<6) {
    $('.block:last').before(' <div class="block"><input type="text" /><span class="remove">Remove Option</span></div>');
    alert(count);
    count++;
    if (count==5) {
     $('.add').hide();
    }
    } 
});

$('body').on('click', '.remove', function () {
    $(this).parent('.block').remove();
    $('.add').show();
    alert(count);
    count--;
});

＆＃13;

.block {
    display: block;
}
input {
    width: 50%;
    display: inline-block;
}
span {
    display: inline-block;
    cursor: pointer;
    text-decoration: underline;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="optionBox">
    <div class="block">
        <input type="text" />
    </div>
    <div class="block"> <span class="add">Add Option</span>

    </div>
</div>

＆＃13;

修改：添加了隐藏/显示添加输入功能

Answer 7

非常简单。

＆＃13;

var i=1;
$('.add').click(function () {
if(i>=6){

}else{
i = i+1;
 $('.block:last').before(' <div class="block"><input type="text" /><span class="remove">Remove Option</span></div>');
}
});

$('body').on('click', '.remove', function () {
    i = i-1;
    $(this).parent('.block').remove();
});

＆＃13;

.block {
    display: block;
}
input {
    width: 50%;
    display: inline-block;
}
span {
    display: inline-block;
    cursor: pointer;
    text-decoration: underline;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="optionBox">
    <div class="block">
        <input type="text" />
    </div>
    <div class="block"> <span class="add">Add Option</span>

    </div>
</div>

＆＃13;

限制使用JavaScript在div中添加HTML元素

7 个答案: