Удалите указанный массив c из набора множественных массивов, используя jquery - PullRequest
Новая
       5

Удалите указанный массив c из набора множественных массивов, используя jquery

2 голосов
/ 14 февраля 2020

У меня есть два флажка. Когда я проверяю один, код получает статус и идентификатор этого флажка и pu sh в массив, если это значение уже не существует

Массив становится таким как 

  [8,0] [10,0]

Требования:

  1. Дважды вставляется [8,0] [8,0], если я проверяю, а затем сниму флажок и снова проверяю его, чтобы не вставлять несколько раз одни и те же значения
  2. Удалите указанный массив c из набора массивов, поэтому, если я сниму флажок с 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 ]

2 голосов
/ 14 февраля 2020

Я буду использовать findIndex и сращивание , чтобы справиться с этим, надеюсь, это поможет вам:) 

$(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>
2 голосов
/ 14 февраля 2020

Вы можете использовать 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">

Объяснение

  1. В первом l oop .each мы перебираем каждое существующее значение в массиве и установить exist в true, когда мы находим элемент с идентификатором и статусом, совпадающим с выбранным нами

    • Если после l oop мы существуем как true, мы знаю, что он уже существует, и мы не будем помещать sh в массив, в противном случае мы отправим sh в массив

  2. В другом условии, которое мы использовали filter функция массива, эта функция фильтрует массив и сохраняет только те элементы, для которых мы вернули true, для элементов, которые мы возвращаем false, она удаляется из результирующего массива

    • Итак, мы проверили каждый элемент массив для точного совпадения id & status, и если его совпадение, мы возвращаем false, поэтому он удаляется из результирующего массива
0 голосов
/ 14 февраля 2020

Если массив маленький, просто воссоздайте его каждый раз 

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">
...