Увеличение / уменьшение количества отмеченных флажков - PullRequest
Новая
       20

Увеличение / уменьшение количества отмеченных флажков

0 голосов
/ 20 апреля 2020

Я хочу, чтобы переключатели учитывались, а они - нет. Когда я нажимаю одну из них, счетчик увеличивается до 1 и застревает. Когда я уменьшаю счетчик, он равен -1.

. Ожидаемый результат: увеличение значения переключателя на счетчике (counter++) и уменьшение значения счетчика (counter--).

Переключатели создаются в Bootstrap. 

(function() {
  $(() => {
    let counter = 0
    for (let index = 1; index < 10; index++) {
      let div = $("<div>").addClass("custom-control custom-switch");
      let myLabel = createLabel("toggle" + index);
      let myCheckbox = createCheckbox("toggle" + index, counter);

      $(div).append(myCheckbox, myLabel);
      $("#container").append(div);
    }
  });
})();

function createLabel(id) {
  return $(`<label for=${id} class=custom-control-label>${id}&nbsp;</label>`);
}

function createCheckbox(id, counter) {
  return $(`<input type=checkbox class=custom-control-input id=${id}>`).click(() => {
    onCheckBoxSwitchToggled(id, counter);
  });
}

function onCheckBoxSwitchToggled(id, counter) {
  $(`input[id=${id}`).on("change", function() {
    if (counter < 6) {
      if ($(this).prop("checked") === true) {
        counter++
        $("#text").text(counter)
      } else {
        counter--
        $("#text").text(counter)
      }
    } else {
      alert("over than 5")
    }
  });
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<div id="container"></div>
<p id="text"></p>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">Open modal</button>
<div class="container" data-toggle="modal" data-target="#myModal">
  <div class="modal fade" id="myModal">
    <div class="modal-dialog modal-sm">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title">The chosen coins</h4>
        </div>
        <div class="modal-body">
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
        </div>
      </div>
    </div>
  </div>
</div>

1 Ответ

1 голос
/ 20 апреля 2020

В вашем коде довольно много проблем.

  • Вы используете IIFE вместо обработчика document.ready
  • Вы помещаете функцию внутри jQuery объект. Не делай этого. В любом случае вам это не нужно, просто поместите logi c в обработчик document.ready, который будет выполняться при загрузке DOM.
  • Вы выбираете id с помощью селектора атрибутов вместо фактического селектора идентификатора. В этом селекторе атрибутов также отсутствует закрывающий ]
  • div уже содержит jQuery объект, вам не нужно помещать его в другой объект.
  • Флажок вводит вас При создании отсутствуют атрибуты name и value.
  • Используйте событие change на флажках и радиовходах, а не click. Это делается из соображений доступности.
  • Используйте один делегированный обработчик событий для содержимого Dynami c вместо присоединения нового клона обработчика событий при каждом создании элемента
  • Удалите вложенный обработчик событий в onCheckBoxSwitchToggled. Вам это не нужно, поскольку это событие уже запускается, когда с флажком все равно взаимодействуют.

Однако основная проблема с вашим логином c заключается в том, что вы полагаетесь на аргумент counter который определяется глобально. Вместо этого просто используйте свойство length вместе с селектором :checked, чтобы получить количество отмеченных флажков.

Ниже приведен рабочий пример. Обратите внимание, что методы createLabel() и createCheckbox() теперь почти полностью избыточны и могут быть удалены. Попробуйте это: 

jQuery($ => {
  for (let index = 1; index < 10; index++) {
    let $div = $("<div>").addClass("custom-control custom-switch");
    let $label = createLabel("toggle" + index);
    let $checkbox = createCheckbox("toggle" + index);
    $div.append($checkbox, $label);
    $("#container").append($div);
  }
  
  $('#container').on('change', ':checkbox', function() {
    let counter = $(':checkbox:checked').length;
    $('#text').text(counter);
  
    if (counter > 5)
      console.log("over  5")
    });
});

function createLabel(id) {
  return $(`<label for="${id}" class="custom-control-label">${id}&nbsp;</label>`);
}

function createCheckbox(id) {
  return $(`<input type="checkbox" class="custom-control-input" id="${id}" name="foo" value="${id}">`)
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<div id="container"></div>
<p id="text"></p>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">Open modal</button>
<div class="container" data-toggle="modal" data-target="#myModal">
  <div class="modal fade" id="myModal">
    <div class="modal-dialog modal-sm">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title">The chosen coins</h4>
        </div>
        <div class="modal-body">
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
        </div>
      </div>
    </div>
  </div>
</div>
...