異なるdivで別々にjQueryを使用して動的要素を作成する

Question

dinamically入力フォームを作成するためにjQueryを使用しています。私は自分のコードの例を作りました（この例は入力フォームを作成しませんが、私のスクリプトとしてはうまく機能し、同じエラーを再現します）。

問題は、最初のdivの「イベント」の「追加」を押すと、jQueryが1から始まる数字の頭蓋骨を生成するということです。
2番目のdivの「イベント」の「追加」を押した後、数字は1からではなく、最初のdivの "event"の最後の数字から始まります。

"イベント"クラスを変更することはできません。この例では2つのdivがありますが、それらは3-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() { 
 
\t i = 1; 
 
    $('.numberDiv').each(function() { 
 
    \t $(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プロパティを使用します。その後、1つ増分します。

$('.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() { 
 
    \t $(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>

Answer 2

あなたはただそう

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(); 
    }) 
})