Как я могу уменьшить мои повторные коды JQuery

Question

jQuery('#edit-field-number-of-beneficial-owner-und').change(function() {
  if (jQuery(this).val() == 0) {
    jQuery(this).parent().parent('#edit-field-number-of-beneficial-owner').siblings('#edit-field-beneficial-owner-one').nextUntil('.form-actions').find('input, select, textarea').val('');
    jQuery(this).parent().parent('#edit-field-number-of-beneficial-owner').siblings('#edit-field-beneficial-owner-one').nextUntil('.form-actions').find('input:checkbox').attr('checked', false);
    jQuery(this).parent().parent('#edit-field-number-of-beneficial-owner').siblings('#edit-field-beneficial-owner-one').nextUntil('.form-actions').find('select').trigger("chosen:updated");
  } else if (jQuery(this).val() == 1) {
    jQuery(this).parent().parent('#edit-field-number-of-beneficial-owner').siblings('#edit-field-beneficial-owner-two').nextUntil('.form-actions').find('input, select, textarea').val('');
    jQuery(this).parent().parent('#edit-field-number-of-beneficial-owner').siblings('#edit-field-beneficial-owner-two').nextUntil('.form-actions').find('input:checkbox').attr('checked', false);
    jQuery(this).parent().parent('#edit-field-number-of-beneficial-owner').siblings('#edit-field-beneficial-owner-two').nextUntil('.form-actions').find('select').trigger("chosen:updated");
  } else if (jQuery(this).val() == 2) {
    jQuery(this).parent().parent('#edit-field-number-of-beneficial-owner').siblings('#edit-field-beneficial-owner-three').nextUntil('.form-actions').find('input, select, textarea').val('');
    jQuery(this).parent().parent('#edit-field-number-of-beneficial-owner').siblings('#edit-field-beneficial-owner-three').nextUntil('.form-actions').find('input:checkbox').attr('checked', false);
    jQuery(this).parent().parent('#edit-field-number-of-beneficial-owner').siblings('#edit-field-beneficial-owner-three').nextUntil('.form-actions').find('select').trigger("chosen:updated");
  }
});

Answer 1

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

jQuery('#edit-field-number-of-beneficial-owner-und').change(function() {
    const $this = jQuery(this);
    const labels = ['one', 'two', 'three'];
    const target = $this.parent()
        .parent('#edit-field-number-of-beneficial-owner')
        .siblings(`#edit-field-beneficial-owner-${labels[+$this.val()]}`)
        .nextUntil('.form-actions');

    target
        .find('input, select, textarea')
        .val('');

    target
        .find('input:checkbox')
        .attr('checked', false);

    target
        .find('select')
        .trigger('chosen:updated');
});

Answer 2

Есть множество способов справиться с этим. Вот один пример.

Отобразите свое значение 0-2 в строковый эквивалент. Используйте значение в качестве индекса в массиве, чтобы получить строку (обратите внимание на обратные галочки, которые позволяют вам использовать литералы шаблона ). Сохраните длинную серию вызовов jQuery в переменной и используйте эту переменную для вызовов find().

jQuery('#edit-field-number-of-beneficial-owner-und').change(function() {
  let ownerMap = ['one', 'two', 'three']
  let owner = jQuery(this).val()

  let formAction = jQuery(this).parent().parent('#edit-field-number-of-beneficial-owner').siblings(`#edit-field-beneficial-owner-${ownerMap[owner]}`).nextUntil('.form-actions')
  formAction.find('input, select, textarea').val('');
  formAction.find('input:checkbox').attr('checked', false)
  formAction.find('select').trigger("chosen:updated")
});

Answer 3

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

jQuery('#edit-field-number-of-beneficial-owner-und').change(function() {
  let numOwner = jQuery(this).parent().parent('#edit-field-number-of-beneficial-owner');
  let handle = function(sibs) {
    sibs.nextUntil('.form-actions').find('input, select, textarea').val('');
    sibs.nextUntil('.form-actions').find('input:checkbox').attr('checked', false);
    sibs.nextUntil('.form-actions').find('select').trigger("chosen:updated");
  }

  if (jQuery(this).val() == 0) {
    handle(numOwner.siblings('#edit-field-beneficial-owner-one'))
  } else if (jQuery(this).val() == 1) {
    handle(numOwner.siblings('#edit-field-beneficial-owner-two'))
  } else if (jQuery(this).val() == 2) {
    handle(numOwner.siblings('#edit-field-beneficial-owner-three'))
  }
});