陣列最大長度

Question

當我click圖像應當將它添加到一個array，然而array的max lenght是6，因此，如果有已經6對象 S IN的array上它應該alert和停止讓任何新圖像上的用戶click。

當我運行以下我可以不斷添加圖像和alert從未發生。

 jQuery('body').on('change', '.masonry .item :checkbox', function() { 
     var urls = []; 
     urls.length = 6; 
     if (jQuery(urls.length > 6)) { 
      alert("Puoi aggiungere un massimo di 6 immagini"); 
     } else { 
      jQuery('.masonry .item :checkbox:checked').each(function() { 
      urls.push(jQuery(this).next('label').find('img').attr('src')); 
      }); 
     } 
     }); 

Answer 1

您必須檢查選中項目的長度，而不是空數組。

jQuery('body').on('change', '.masonry .item :checkbox', function() { 
    var urls = []; 
    var checkedItems = jQuery('.masonry .item :checkbox:checked'); // get the checked items 
    if (checkedItems.length > 6) {         // if the checked items are more than 6, ... 
     alert("No! No! No! Only 6!"); 
     jQuery(this).prop("checked", false); //<<< UNCHECK THE ELEMENT JUST CHECKED SO THE COUNT REMAINS 6 
    } else { 
     checkedItems.each(function() { 
      urls.push(jQuery(this).next('label').find('img').attr('src')); 
     }); 
    } 
}); 

Answer 2

使用if (urls.length > 6)代替if (jQuery(urls.length > 6))

這是按預期工作。

var urls = []; 
 
urls.length = 6; 
 
document.write(urls.length); 
 
document.write("<br>"); 
 
document.write(urls.length > 6)

/*聲明你的方法之外的URL陣列，使用點擊事件和 event.preventDefault();停止複選框被檢查。 */

var urls = []; 

jQuery('body').on('click', '.masonry .item :checkbox', function (event) { 
      //alert(urls.length); 
      if (urls.length > 5) { 
       alert("Puoi aggiungere un massimo di 6 immagini"); 
       event.preventDefault(); 
      } else { 
      //alert(jQuery(this).next('label').find('img').attr('src')) 
     urls.push(jQuery(this).next('label').find('img').attr('src')); 

      } 
      }); 

Answer 3

將您的urls數組聲明爲全局變量。 刪除urls.length = 6;它沒有效果。 修改您如果條件 如果（urls.length> 6）

Answer 4

如果需要src S的至多6個檢查input S，你可以創建一個object您可以在其中設置和刪除項目按他們的checked狀態。另外，通過使用click事件，您可以防止不必要地複選框爲checked（這將要求您手動取消選中）。找到工作小提琴here和下面的工作片段。

var urls={}; 
 
console.clear(); 
 
jQuery('body').on('click', '.masonry .item :checkbox', function (e) { 
 
\t var this_id = jQuery(this).attr("id"); 
 
    var is_checked = jQuery(this).is(":checked"); 
 
    if(is_checked){ 
 
     if (Object.keys(urls).length < 6){ 
 
     urls[this_id] = jQuery(this).next('label').find('img').attr('src'); 
 
     } else { 
 
     \t alert("Puoi aggiungere un massimo di 6 immagini"); 
 
     e.preventDefault(); 
 
     return false; 
 
     } 
 
    } else { 
 
    \t \t delete(urls[this_id]); 
 
    } 
 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="masonry"><div class="item"><input type="checkbox" name="thing_1" value="valuable" id="thing_1"><label for="thing_1"><img class="img-responsive" src=""></label></div><div class="item"><input type="checkbox" name="thing_2" value="valuable" id="thing_2"><label for="thing_2"><img class="img-responsive" src=""></label></div><div class="item"><input type="checkbox" name="thing_3" value="valuable" id="thing_3"><label for="thing_3"><img class="img-responsive" src=""></label></div><div class="item"><input type="checkbox" name="thing_4" value="valuable" id="thing_4"><label for="thing_4"><img class="img-responsive" src=""></label></div><div class="item"><input type="checkbox" name="thing_5" value="valuable" id="thing_5"><label for="thing_5"><img class="img-responsive" src=""></label></div><div class="item"><input type="checkbox" name="thing_6" value="valuable" id="thing_6"><label for="thing_6"><img class="img-responsive" src=""></label></div><div class="item"><input type="checkbox" name="thing_7" value="valuable" id="thing_7"><label for="thing_7"><img class="img-responsive" src=""></label></div><div class="item"><input type="checkbox" name="thing_8" value="valuable" id="thing_8"><label for="thing_8"><img class="img-responsive" src=""></label></div><div class="item"><input type="checkbox" name="thing_9" value="valuable" id="thing_9"><label for="thing_9"><img class="img-responsive" src=""></label></div><div class="item"><input type="checkbox" name="thing_10" value="valuable" id="thing_10"><label for="thing_10"><img class="img-responsive" src=""></label></div><div class="item"><input type="checkbox" name="thing_11" value="valuable" id="thing_11"><label for="thing_11"><img class="img-responsive" src=""></label></div><div class="item"><input type="checkbox" name="thing_12" value="valuable" id="thing_12"><label for="thing_12"><img class="img-responsive" src=""></label></div><div class="item"><input type="checkbox" name="thing_13" value="valuable" id="thing_13"><label for="thing_13"><img class="img-responsive" src=""></label></div><div class="item"><input type="checkbox" name="thing_14" value="valuable" id="thing_14"><label for="thing_14"><img class="img-responsive" src=""></label></div><div class="item"><input type="checkbox" name="thing_15" value="valuable" id="thing_15"><label for="thing_15"><img class="img-responsive" src=""></label></div><div class="item"><input type="checkbox" name="thing_16" value="valuable" id="thing_16"><label for="thing_16"><img class="img-responsive" src=""></label></div><div class="item"><input type="checkbox" name="thing_17" value="valuable" id="thing_17"><label for="thing_17"><img class="img-responsive" src=""></label></div><div class="item"><input type="checkbox" name="thing_18" value="valuable" id="thing_18"><label for="thing_18"><img class="img-responsive" src=""></label></div><div class="item"><input type="checkbox" name="thing_19" value="valuable" id="thing_19"><label for="thing_19"><img class="img-responsive" src=""></label></div><div class="item"><input type="checkbox" name="thing_20" value="valuable" id="thing_20"><label for="thing_20"><img class="img-responsive" src=""></label></div></div>

Answer 5

在我的理解，下面的代碼是導致問題：

jQuery('.masonry .item :checkbox:checked').each(function() { 
    urls.push(jQuery(this).next('label').find('img').attr('src')); 
}); 

假設你有10張圖像，因此在每一次點擊，你是推10次。您應該只推送一次當前元素。嘗試檢查元素是否存在。如果是的話，不要推它。

以下是我將如何做它的示例小提琴。它不使用jQuery，但你可以相應地調整你的代碼。

JSFiddle

---

編輯

Updated Fiddle

的問題是：

jQuery('body').on('change', '.masonry .item :checkbox', function() { 
    var urls = []; 

您每次點擊都初始化爲urls。所以它總是會有length = 0

它應該在處理程序的範圍之外。

Answer 6

檢查此解決方案，希望它有幫助，您可以檢查console.log以查看更新的url和url數量。

1st聲明數組地址變化事件。

內if使用停止檢查更多的IMG

內else空的URL數組第一個（在你取消選中一個複選框，在你不想推這種情況下，想要把它拿出來的情況下，使它簡單只是清空該列表並添加每個檢查陣列（當然，你需要改善這一點，但現在這是最快的工作解決方案））

我有兩個控制檯日誌在最後，所以你可以驗證網址和長度。

var urls = []; 
jQuery('body').on('change', '.masonry .item :checkbox', function() { 
    if ($('input[type=checkbox]:checked').length > 6) { 
    alert("Puoi aggiungere un massimo di 6 immagini"); 
    var $checkbox = $(this); 
    // Ensures this code runs AFTER the browser handles click however it wants. 
    setTimeout(function() { 
     $checkbox.removeAttr('checked'); 
    }, 0); 
    event.preventDefault(); 
    event.stopPropagation(); 
    } else { 
     urls = []; 
    jQuery('.masonry .item :checkbox:checked').each(function() { 
     urls.push(jQuery(this).next('label').find('img').attr('src')); 
    }); 
    } 
    console.log('this urls-->' + urls); 
    console.log('this urls length-->' + urls.length); 
}); 

https://jsfiddle.net/dalinhuang/5rLh3bq2/4/

Answer 7

你可以得到，而不是在複選框被點擊時選中的元素的長度。這更直接一點。我也阻止了6之後的任何複選框被啓用。

var urls = []; // if you wish to use it outside, make it global 

$('.masonry :checkbox').on('click', function(e){ 

    var selected = $('.masonry :checkbox:checked'); 

    if(selected.length > 6){ 
    alert('Sorry, no more than 6'); 
    e.preventDefault(); // stops the checkbox from being selected 
    return; 
    } 

    // do what you wish with the selected ones 
    // selected.each() 

}) 

這裏是一個工作codepen：https://codepen.io/h3raldo/pen/vmOXrJ