Question

我正在使用jQuery来创建dinamically输入表单。我做了一个我的代码的例子（这个例子不会创建输入表单，但它可以像我的脚本一样工作，并且它会重现相同的错误），你可以玩，以便更好地理解我的意思。

问题是，如果我按下第一个div“事件”的“添加”，我的jQuery会生成带有从1开始的数字的头骨。
之后我按下第二个div“事件”的“添加”，但数字不是从1开始，而是从第一个div“事件”的最后一个数字开始。

无法更改班级“活动”。在这个例子中有2个div，但它们可以是3-4-5或更多，都是“事件”类。

我可以做些什么才能从1开始“事件”？

var i = 1;

$('.plus').click(function(e) {

  var $numberDiv = $('<span>' + i + '</span>').addClass('numberDiv');
  var $clear = $('<div />').addClass('clear');
  var $event = $(e.currentTarget).closest('.event');

  $event.find('.participantContainer').append($numberDiv);

  i++;
})

$('.minus').click(function(e) {
  var $numberDiv = $('<span>'> + i + '</span>').addClass('numberDiv');
  var $clear = $('<div />').addClass('clear');
  var $event = $(e.currentTarget).closest('.event');

  $event.find('.numberDiv:last').remove();

  i--;
})

$('.reset').click(function() {
	i = 1;
  $('.numberDiv').each(function() {
  	$(this).remove();
  })
})

body {
    font-family: sans-serif;
}

button {
    background: none;
}

.clear {
  clear: both;
}

.plus,
.minus,
.reset {
  height: 33px;
    font-size: 20px;
    cursor: pointer;
    margin-right: 2px;
    float: left;
    margin-bottom: 10px;
    border-radius: 10px;
    padding: 0 0 0 0;
}

.plus {
  border: 2px solid green;
  width: 56px;
}

.plus:hover {
  background-color: green;
}

.minus:hover {
  background-color:red;
}

.minus {
  border: 2px solid red;
  width: 95px;
}

.reset {
  border: 2px solid blue;
  width: 95px;
}

.reset:hover {
  background-color: lightblue;
}

.numberDiv {
  font-size: 20px;
  position: relative;
  top: -5px;
  margin-right: 10px;
}

.numberDiv:before {
  content:'☠';
  font-size: 30px;
}

.participantContainer {
  float: left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="event">
  <button class="plus">Add</button>
  <button class="minus">Remove</button>
  <div class="participantContainer"></div>
</div>
<div class="clear"></div>
<div class="event">
  <button class="plus">Add</button>
  <button class="minus">Remove</button>
  <div class="participantContainer"></div>
</div>
<div class="clear"></div>
<button class="reset">Reset</button>

主要原因当然是我正在学习，而且我对jQuery没有太多经验。

提前致谢！

Answer 1

你可以使用现有头骨的数量，并重置，只需删除它们。你可以完全跳过这个柜台。

var currentCount = $(e.currentTarget).closest('.event').find('.participantContainer').children('span').length;

使用length属性获取当前计数。然后将其增加一个。

＆＃13;

$('.plus').click(function(e) {
  var currentCount = $(e.currentTarget).closest('.event').find('.participantContainer').children('span').length;
 
  var $numberDiv = $('<span>' + (currentCount+1) + '</span>').addClass('numberDiv');
  var $clear = $('<div />').addClass('clear');
  var $event = $(e.currentTarget).closest('.event');

  $event.find('.participantContainer').append($numberDiv);
})

$('.minus').click(function(e) {

  var $event = $(e.currentTarget).closest('.event');
  $event.find('.numberDiv:last').remove();
})

$('.reset').click(function() {
  $('.numberDiv').each(function() {
  	$(this).remove();
  })
})

＆＃13;

body {
    font-family: sans-serif;
}

button {
    background: none;
}

.clear {
  clear: both;
}

.plus,
.minus,
.reset {
  height: 33px;
    font-size: 20px;
    cursor: pointer;
    margin-right: 2px;
    float: left;
    margin-bottom: 10px;
    border-radius: 10px;
    padding: 0 0 0 0;
}

.plus {
  border: 2px solid green;
  width: 56px;
}

.plus:hover {
  background-color: green;
}

.minus:hover {
  background-color:red;
}

.minus {
  border: 2px solid red;
  width: 95px;
}

.reset {
  border: 2px solid blue;
  width: 95px;
}

.reset:hover {
  background-color: lightblue;
}

.numberDiv {
  font-size: 20px;
  position: relative;
  top: -5px;
  margin-right: 10px;
}

.numberDiv:before {
  content:'☠';
  font-size: 30px;
}

.participantContainer {
  float: left;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="event">
  <button class="plus">Add</button>
  <button class="minus">Remove</button>
  <div class="participantContainer"></div>
</div>
<div class="clear"></div>
<div class="event">
  <button class="plus">Add</button>
  <button class="minus">Remove</button>
  <div class="participantContainer"></div>
</div>
<div class="clear"></div>
<button class="reset">Reset</button>

＆＃13;

Answer 2

您可以将变量i更改为数组，并将其作为加号和减号的目标

var i = [];

$('.plus').click(function(e) {

  var index = $('.plus').index(this);
  i[index] = typeof i[index] === 'undefined' ? 1 : i[index] + 1;

  var $numberDiv = $('<span>' + i[index]  + '</span>').addClass('numberDiv');
  var $clear = $('<div />').addClass('clear');
  var $event = $(e.currentTarget).closest('.event');

  $event.find('.participantContainer').append($numberDiv);

})

$('.minus').click(function(e) {
  var index = $('.minus').index(this);
  i[index] = typeof i[index] === 'undefined' ? 1 : i[index] - 1;
  var $numberDiv = $('<span>'> + i[index]  + '</span>').addClass('numberDiv');
  var $clear = $('<div />').addClass('clear');
  var $event = $(e.currentTarget).closest('.event');

  $event.find('.numberDiv:last').remove();
})

$('.reset').click(function() {
    i = [];
  $('.numberDiv').each(function() {
    $(this).remove();
  })
})

在不同的div

2 个答案: