jquery - 如何将当前单击的元素添加到jquery中的数组？

Question

我的号码如下

<div class="btn">
    <span class="num-items">1</span>
</div>
<div class="btn">
    <span class="num-items">2</span>
</div>
<div class="btn">
    <span class="num-items">3</span>
</div>
<div class="btn">
    <span class="num-items">4</span>
</div>
<div class="btn">
    <span class="num-items">5</span>
</div>

$('.btn').click(function(){
    var currentEl = [];
    $(this).toggleClass('bg_red');
    currentEl.push($(this));

    if(currentEl.length >=3){
        alert("You can pick only 3 item");
    }
})

每次单击数字时，我都想将此元素添加到数组中，以便当数组长度大于或等于 3 时，我可以提醒消息。

标签： jquery

Answer 1

添加日志，您会看到每次单击时都会currentEl重置[]，因为您在每次函数调用时都重新声明了它

$('.btn').click(function(){
    var currentEl = [];
    $(this).toggleClass('bg_red');
    
    console.log(currentEl)
    
    currentEl.push($(this));

    if(currentEl.length >=3){
        alert("You can pick only 3 item");
    }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="btn">
  <span class="num-items">1</span>
</div>
<div class="btn">
  <span class="num-items">2</span>
</div>
<div class="btn">
  <span class="num-items">3</span>
</div>
<div class="btn">
  <span class="num-items">4</span>
</div>
<div class="btn">
  <span class="num-items">5</span>
</div>

将 currentEl 移到外部范围，事情会很好，但是对逻辑的一个小建议是记得在添加之前检查长度

var currentEl = [];
$('.btn').click(function(){
    $(this).toggleClass('bg_red');
    
    console.log('before add', currentEl)
    
    if(currentEl.length >=3){
        alert("You can pick only 3 item");
        return;
    }
    
    currentEl.push($(this).find('span').text());
    
    console.log('after add', currentEl)

    
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="btn">
  <span class="num-items">1</span>
</div>
<div class="btn">
  <span class="num-items">2</span>
</div>
<div class="btn">
  <span class="num-items">3</span>
</div>
<div class="btn">
  <span class="num-items">4</span>
</div>
<div class="btn">
  <span class="num-items">5</span>
</div>