Можно ли заменить этот if чем то более компактным?

Question

[Nick Bukovskiy]

Можно ли как то этот if сделать меньше сохраняя функционал? Он выглядит страшно и мне бы хотелось записать этот if как то более грамотно

const target = e.target;

if (target.classList.contains('checkoutMethod') || target.classList.contains('checkoutMethodImage') || target.classList.contains('checkoutMethodName') || target.parentNode.parentNode.classList.contains('checkoutMethodImage') || target.parentNode.classList.contains('checkoutMethodImage'))

Comments

[Роман]

Просто передрал у Олег Ас и sim3x и слегка переиначил. Выгода сомнительна, но тем не менее

// возвращает ссылку на функцию contains для объекта или его родителей
// parentLevel - на сколько уровней подняться по списку родиьелей.
function contains( target, parentLevel) {
   return parentLever ?
   target.classList.contains :
   contains( target.parentNode, parentLevel-1);
}

// возвращает true если один из элементов указанных в options содержится в target или его родителях. 
function is_contains_checkouts_methods (target, options){
   return Object.entries(options).some(i=>contains(target, item[1])(item[0]));
);

if( is_contains_checkouts_methods(target, {
    'checkoutMethod': 0,
    'checkoutMethodImage': 0, 
    'checkoutMethodName': 0,
    'checkoutMethodImage': 1, 
    'checkoutMethodImage': 2
  })
){
// если да
}

PS: не проверял работоспособность, с телефона не удобно)))

Подправил косячки из тех что нашел (4 раза :))

Answer 1

[Олег Ас]

const classNames = ['checkoutMethod', 'checkoutMethodImage', 'checkoutMethodName'];
if (classNames.some(className => target.classList.contains(className)) || target.parentNode.classList.contains(classNames[1]) || target.parentNode.parentNode.classList.contains(classNames[1])) {
}

Comments

[Nick Bukovskiy]

Отличный вариант, спасибо. Но у меня так же присудствуют элементы с .parentNode. Как быть в этом случаи?

[Олег Ас]

Nick Bukovskiy, первая мысль, взять ещё один массив и добавить || , но это ещё не окончательное решение...пока думаю...

Answer 2

[sim3x]

function is_contains_checkouts_methods (target){
  return (target.classList.contains('checkoutMethod') || target.classList.contains('checkoutMethodImage') || target.classList.contains('checkoutMethodName') || target.parentNode.parentNode.classList.contains('checkoutMethodImage') || target.parentNode.classList.contains('checkoutMethodImage'));
}