使用 jquery 從多個數組集中刪除特定數組
[英]Remove specific array from multiple array set using jquery
問題描述
我有兩個復選框。 當我選中一個時，代碼將獲取該復選框的狀態和 id 並推送到數組中，如果該值尚不存在
數組集變成這樣
[8,0] [10,0]
要求：
- 如果我檢查然后取消選中並再次檢查它，它會插入 [8,0] [8,0] 兩次，所以這不應該多次插入相同的值
- 從數組集中刪除特定數組，因此如果我取消選中 chkecbox，則僅刪除 [8,0] 但保留 [10,0]
var positions = []; $("body").on('click', '.check_box', function() { var id = $(this).attr('data-id'); var status = $(this).attr('data-status'); if ($(this).prop("checked") == true) { // if click on check if (!$.inArray(id, positions)) positions.push(id); // if id and status not in array then only push positions.push([id, status]); // it will insert like [8,10] but geting duplicate [8,10] [8,10] console.log(positions); } else { // if uncheck checkbox // remove specific value like [8,0] or if value present [10,0] then remove this console.log(positions); } });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="checkbox" class="check_box" data-id="8" data-status="0"> <input type="checkbox" class="check_box" data-id="10" data-status="0">
3 個解決方案
解決方案1
2 已采納 2020-02-14 07:21:15
您可以使用indexOf檢查對象是否存在於數組中並僅在它不存在時添加
對於刪除，您可以使用filter並僅選擇數組中與您指定的不完全相同的那些對象
var positions = []; $("body").on('click', '.check_box', function() { var id = $(this).attr('data-id'); var status = $(this).attr('data-status'); if ($(this).prop("checked") == true) { var exists = false; positions.forEach((p) => { if (id == p[0] && status == p[1]); exists = true; }); if (!exists) { positions.push([id, status]); } } else { positions = positions.filter(function(a) { return !(a[0] == id && a[1] == status); }); } console.log(positions); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="checkbox" class="check_box" data-id="8" data-status="0"> <input type="checkbox" class="check_box" data-id="10" data-status="0">
解釋
在第一個循環
.each，當我們找到一個與我們選擇的元素具有相同 id 和狀態的元素時，我們遍歷數組中的每個現有值並將exist設置為 true- 如果循環后我們已經存在為真，我們知道它已經存在，我們不會將它推送到數組，否則我們會將它推送到數組
在 else 條件下，我們使用了數組的
filter函數，這個函數過濾了數組並只保留我們返回 true 的元素，對於我們返回 false 的元素，它會從結果數組中刪除- 因此，我們確實檢查了數組的每個元素是否與
id和status完全匹配，如果匹配，則返回 false，因此它會從結果數組中刪除
- 因此，我們確實檢查了數組的每個元素是否與
解決方案2
2 2020-02-14 07:55:29
我將使用findIndex和splice來處理它，希望這可以幫助你:)
$(function() { let positions = []; $("body").on('click', 'input:checkbox', function() { let id = $(this).attr('data-id'); let status = $(this).attr('data-status'); let data = [id, status]; if ($(this).is(':checked')) { positions.push(data); } else { let index = positions.findIndex(c => c[0] === id); if (index != -1) positions.splice(index, 1); } $('#result').html(positions.toString()); }); });
#result{ width: 20rem; height: 1rem; margin-top: 2rem; border-width:3px; border-style:dashed; border-color:#FFAC55; padding: 15px 20px; }
<!DOCTYPE html> <html> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> </head> <body> <input type="checkbox" data-id="A" data-status="0">A</button> <input type="checkbox" data-id="B" data-status="0">B</button> <div id="result"></div> </body> </html>
解決方案3
0 2020-02-14 07:33:45
如果數組很小，每次只需重新創建它
let positions; $("body").on('click', '.check_box', function() { positions = []; $(".check_box:checked").each(function() { positions.push([ $(this).data('id'), $(this).data('status') ]); }); console.log(positions); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="checkbox" class="check_box" data-id="8" data-status="0"> <input type="checkbox" class="check_box" data-id="10" data-status="0">
從其他數組jQuery中刪除多個數組
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.