如何在包装器中添加Jquery变量

Question

当我点击按钮时，我动态添加标签。但是我希望它显示为标签1，标签2，标签3等。如何在追加内添加jquery变量。 这是我的代码

＆＃13;

＆＃13;

$(document).ready(function() {
  var max_fields = 10;
  var wrapper = $(".container1");
  var add_button = $(".add_form_field");

  var x = 1;
  $(add_button).click(function(e) {
    e.preventDefault();
    if (x < max_fields) {
      x++;
      $(wrapper).append('<div><label><b>Assignment </b></label><a href="#" class="delete"> Delete </a></div>');
    } else {
      alert('You Reached the limits')
    }
  });

  $(wrapper).on("click", ".delete", function(e) {
    e.preventDefault();
    $(this).parent('div').remove();
    x--;
  })
});

＆＃13;

.container1 input[type=text] {
  padding: 5px 0px;
  margin: 5px 5px 5px 0px;
}

.add_form_field {
  background-color: #1c97f3;
  border: none;
  color: white;
  padding: 8px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  border: 1px solid #186dad;
}

input {
  border: 1px solid #1c97f3;
  width: 260px;
  height: 40px;
  margin-bottom: 14px;
}

.delete {
  background-color: #fd1200;
  border: none;
  color: white;
  padding: 5px 15px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
  margin: 4px 2px;
  cursor: pointer;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<div class="container1">
  <button class="add_form_field">Add Assignments &nbsp; <span style="font- 
     size:16px; font-weight:bold;">+ </span></button>
  <div></div>
</div>

＆＃13;

＆＃13;

＆＃13;

这是我的小提琴 我想要任务1，任务2等 http://jsfiddle.net/f5n2qhzv/243/

Answer 1

以下是带有新变量i的代码，该变量会增加分配的名称 我还将x的初始值修改为0，以便max_fields实际为10，
加上通过将2个类的相同样式分组来缩短CSS （请参阅我在代码段中的评论）

在我看来，分配的编号应该是唯一的标识符，即使删除了其他分配，也不应更改。

＆＃13;

＆＃13;

$(document).ready(function() {
  var max_fields = 10;
  var wrapper = $(".container1");
  var add_button = $(".add_form_field");

  var x = 0; // Modified so that the maximum is really 10
  var i = 0;
  $(add_button).click(function(e) {
    e.preventDefault();
    if (x < max_fields) {
      i++;
      x++;
      $(wrapper).append('<div><label><b>Assignment ' + i + '</b></label><a href="#" class="delete"> Delete </a></div>');
    } else {
      alert('You reached the limit (' + max_fields + ').'); // Here I added max_fields in the message
    }
  });

  $(wrapper).on("click", ".delete", function(e) {
    e.preventDefault();
    $(this).parent('div').remove();
    x--;
  })
});

＆＃13;

.container1 input[type=text] {
  padding: 5px 0px;
  margin: 5px 5px 5px 0px;
}

/* Added this part which regroup the styles used in both classes */
.add_form_field, .delete {
  color: white;
  padding: 5px 15px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
  margin: 4px 2px;
  cursor: pointer;
}

.add_form_field {
  background-color: #1c97f3;
  /*border: none; <-- This is not used, you modify it right below */
  padding: 8px 32px;
  font-size: 16px;
  border: 1px solid #186dad;
}

.delete {
  background-color: #fd1200;
  padding: 5px 15px;
  font-size: 14px;
  border: none;
}

input {
  border: 1px solid #1c97f3;
  width: 260px;
  height: 40px;
  margin-bottom: 14px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<div class="container1">
  <button class="add_form_field">Add Assignments &nbsp; <span style="font- 
     size:16px; font-weight:bold;">+ </span></button>
  <div></div>
</div>

＆＃13;

＆＃13;

＆＃13;

我希望它有所帮助。

Answer 2

尝试使用以下代码添加和删除作业。

＆＃13;

＆＃13;

$(document).ready(function() {
  var max_fields = 10;
  var wrapper = $(".container1");
  var add_button = $(".add_form_field");

  var x = 1;
  var counter = 1;
  $(add_button).click(function(e) {
    e.preventDefault();
    if (x < max_fields) {
      x++;
      $(wrapper).append('<div><label><b>Assignment <span class="class_counter">'+counter+'</span></b></label><a href="#" class="delete"> Delete </a></div>');
      counter++;
    } else {
      alert('You Reached the limits')
    }
  });

  $(wrapper).on("click", ".delete", function(e) {
    e.preventDefault();
    $(this).parent('div').remove();
    //update current container's div counter
    $( " .container1 > div" ).each(function( index ) {
        $(this).find("label b span").text(index);
    });
    x--;
    counter--;
  })
});

＆＃13;

.container1 input[type=text] {
  padding: 5px 0px;
  margin: 5px 5px 5px 0px;
}

.add_form_field {
  background-color: #1c97f3;
  border: none;
  color: white;
  padding: 8px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  border: 1px solid #186dad;
}

input {
  border: 1px solid #1c97f3;
  width: 260px;
  height: 40px;
  margin-bottom: 14px;
}

.delete {
  background-color: #fd1200;
  border: none;
  color: white;
  padding: 5px 15px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
  margin: 4px 2px;
  cursor: pointer;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<div class="container1">
  <button class="add_form_field">Add Assignments &nbsp; <span style="font- 
     size:16px; font-weight:bold;">+ </span></button>
  <div></div>
</div>

＆＃13;

＆＃13;

＆＃13;