Блог

Главная - Вопросы по программированию - Рефакторинг JavaScript работает не так, как ожидалось

Рефакторинг JavaScript работает не так, как ожидалось

#javascript #jquery

#javascript #jquery

Вопрос:

У меня есть этот фрагмент повторяющегося кода, который отключает 2 переключателя от проверки в моем $(document).ready() :

 $(document).ready(function () {
    $("#New").click(function () {
        var toggleOn = $("#New");
        var toggleOff = $("#Used");
        var value = true;

        toggleOn.prop("checked", value);
        toggleOn.val(value);
        toggleOff.prop("checked", !value);
        toggleOff.val(!value);
    });

    $("#Used").click(function () {
        var toggleOn = $("#Used");
        var toggleOff = $("#New");
        var value = true;

        toggleOn.prop("checked", value);
        toggleOn.val(value);
        toggleOff.prop("checked", !value);
        toggleOff.val(!value);
    });
});

Я не хотел повторять код, поэтому я преобразовал его в функцию:

 $(document).ready(function () {
    $("#Used").on("click", toggleRadioButtons("Used", "New"));
    $("#New").on("click", toggleRadioButtons("New", "Used"));
});

function toggleRadioButtons(radioOne, radioTwo) {
    var toggleOn = $("#"   radioOne);
    var toggleOff = $("#"   radioTwo);
    var value = true;

    toggleOn.prop("checked", value);
    toggleOn.val(value);
    toggleOff.prop("checked", !value);
    toggleOff.val(!value);
}

Итак, проблема в том, что с переработанным кодом переключатель больше не отключает другой переключатель должным образом. Я предполагаю, что это связано с закрытием JavaScript, но не уверен, как это будет применяться, поскольку я вызываю функцию во внешней области.

Комментарии:

1. toggleRadioButtons("Used", "New") это вызов функции. Вы передаете возвращаемое значение ( undefined ) в .on()

2. ...on("click", () => toggleRadioButtons("Use...

3. Я думаю, вы неправильно используете переключатели. Разве встроенные переключатели с тем же именем не должны разрешать только один выбор. Вам нужны флажки вместо этого?

4. 1 — Возможно, вы используете радиостанции с тем же именем, поэтому вы можете воспользоваться собственным поведением HTML …. 2 — Попробуйте удалить атрибут «checked» вместо того, чтобы устанавливать значение false ($().removeAttr())

5. Пожалуйста, покажите нам свой HTML.

Ответ №1:

Если вы присвоите обеим переключателям одинаковые name значения, то одновременно можно будет выбрать только один.

jQuery вообще не нужен.

 form {
  display: grid;
  grid-auto-flow: column;
  justify-content: center;
  grid-column-gap: 2em;
} 
 <form name="car">
  <label>New  <input type="radio" name="condition" value="new" /></label>
  <label>Used <input type="radio" name="condition" value="used" /></label>
</form>

Если вы хотите, чтобы они были флажками, вы можете связать их с помощью плагина jQuery. Я вызвал его syncCheckboxes , и код можно найти ниже.

 (function($) {
  $.syncCheckboxes = function(...ids) {
    const $checkboxes = ids.map(id => $(id));
    $checkboxes.forEach(function($checkbox) {
      $checkbox.on('click', function(e) {
        if ($(this).prop('checked')) {
          $checkboxes.forEach(function($curr) {
            $curr.prop('checked', $curr === $checkbox);
          });
        }
      })
    });
  };
})(jQuery);

$.syncCheckboxes('#New', '#Used'); 
 form {
  display: grid;
  grid-auto-flow: column;
  justify-content: center;
  grid-column-gap: 2em;
} 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="car">
  <label>New  <input type="checkbox" id="New"  value="new" /></label>
  <label>Used <input type="checkbox" id="Used" value="used" /></label>
</form>