То, что работает на Jquery не работает на JavaScript. В чем разница?

Question

[Mummers]

В чем собственно разница между ними? Почему тот же участок кода на JavaScript не работает или ошибка где-то.
Или есть что-то, что я не вижу, помогите.
Если коротко, то когда тыкаю на другой элемент, то другие закрываются (Jquery).
Когда тыкаю на другой, то другие не закрываются (JavaScript).
А код тот же.

Jquery

function open_prebooksItems1(){
		$('.preblock_hs_itm1_passive').addClass('preblock_hs_itm1_active');
		$('.preblock_hs_itm1_passive').removeClass('preblock_hs_itm1_passive');
	};
	function close_prebooksItems1(){
        $('.preblock_hs_itm1_active').addClass('preblock_hs_itm1_passive');
		$('.preblock_hs_itm1_active').removeClass('preblock_hs_itm1_active');
	};
	function open_prebooksItems2(){
		$('.preblock_hs_itm2_passive').addClass('preblock_hs_itm2_active');
		$('.preblock_hs_itm2_passive').removeClass('preblock_hs_itm2_passive');
	};
	function close_prebooksItems2(){
		$('.preblock_hs_itm2_active').addClass('preblock_hs_itm2_passive');
		$('.preblock_hs_itm2_active').removeClass('preblock_hs_itm2_active');
	};
function click_hs_itm1(){
	$('.hs_itm1').click(function(){
		openprebook();
		open_prebooksItems1();
		close_prebooksItems2();
		close_prebooksItems3();
	});
};

function click_hs_itm2(){
	$('.hs_itm2').click(function(){
		openprebook();
		open_prebooksItems2();
		close_prebooksItems1();
		close_prebooksItems3();
	});
};

JavaScript

function apply_classes(selector, add, remove) {
  var el = document.querySelector(selector);
  if (el) {
    el.classList.add(add);
    el.classList.remove(remove);
  }  
}
function open_prebooksItems1() {
  apply_classes('.preblock_hs_itm1_passive', 'preblock_hs_itm1_active', 'preblock_hs_itm1_passive');
}
function close_prebooksItems1() {
  apply_classes('.preblock_hs_itm1_active', 'preblock_hs_itm1_passive', 'preblock_hs_itm1_active');
}
function open_prebooksItems2() {
  apply_classes('.preblock_hs_itm2_passive', 'preblock_hs_itm2_active', 'preblock_hs_itm2_passive');
}
function close_prebooksItems2() {
  apply_classes('.preblock_hs_itm2_active', 'preblock_hs_itm2_passive', 'preblock_hs_itm2_active');
}
function click_hs_itm1(){
  document.querySelector('.hs_itm1').addEventListener("click", function() {
    openprebook();
    open_prebooksItems1();
    close_prebooksItems2();
    close_prebooksItems3();
  });
};
function click_hs_itm2(){
  document.querySelector('.hs_itm2').addEventListener("click", function() {
    openprebook();
    open_prebooksItems2();
    close_prebooksItems1();
    close_prebooksItems3();
    
  });
};

Comments

[Mummers]

function openhide(){
 		$('.hide_sett_passive').addClass('hide_sett_active');
		$('.hide_sett_passive').removeClass('hide_sett_passive');
    };
    function closehide(){
 		$('.hide_sett_active').addClass('hide_sett_passive');
		$('.hide_sett_active').removeClass('hide_sett_active');
    };

    
    function openprebook(){
    	$('.preblock_passive').addClass('preblock_active');
    	$('.preblock_passive').removeClass('preblock_passive');
    };
    function closeprebook(){
    	$('.preblock_active').addClass('preblock_passive');
    	$('.preblock_active').removeClass('preblock_active');
    };


	function open_prebooksItems1(){
		$('.preblock_hs_itm1_passive').addClass('preblock_hs_itm1_active');
		$('.preblock_hs_itm1_passive').removeClass('preblock_hs_itm1_passive');
	};
	function close_prebooksItems1(){
        $('.preblock_hs_itm1_active').addClass('preblock_hs_itm1_passive');
		$('.preblock_hs_itm1_active').removeClass('preblock_hs_itm1_active');
	};
	function open_prebooksItems2(){
		$('.preblock_hs_itm2_passive').addClass('preblock_hs_itm2_active');
		$('.preblock_hs_itm2_passive').removeClass('preblock_hs_itm2_passive');
	};
	function close_prebooksItems2(){
		$('.preblock_hs_itm2_active').addClass('preblock_hs_itm2_passive');
		$('.preblock_hs_itm2_active').removeClass('preblock_hs_itm2_active');
	};
	function open_prebooksItems3(){
		$('.preblock_hs_itm3_passive').addClass('preblock_hs_itm3_active');
		$('.preblock_hs_itm3_passive').removeClass('preblock_hs_itm3_passive');
	};
	function close_prebooksItems3(){
		$('.preblock_hs_itm3_active').addClass('preblock_hs_itm3_passive');
		$('.preblock_hs_itm3_active').removeClass('preblock_hs_itm3_active');
	};






	function close_when_all_close(){
		$('.cl').click(function(){
			closehide();
			closeprebook();
            close_prebooksItems1();
            close_prebooksItems2();
            close_prebooksItems3();
		});
	};






function MakeActive_hide_sett_passive(){
	$('.shesterenki').click(function(){openhide();});};

function click_hs_itm1(){
	$('.hs_itm1').click(function(){
		openprebook();
		open_prebooksItems1();
		close_prebooksItems2();
		close_prebooksItems3();
	});
};

function click_hs_itm2(){
	$('.hs_itm2').click(function(){
		openprebook();
		open_prebooksItems2();
		close_prebooksItems1();
		close_prebooksItems3();
	});
};
function click_hs_itm3(){
	$('.hs_itm3').click(function(){
		openprebook();
		open_prebooksItems3();
		close_prebooksItems1();
		close_prebooksItems2();
	});
};







$(document).ready(function(){
	close_when_all_close();
	MakeActive_hide_sett_passive();
	click_hs_itm1();
	click_hs_itm2();
	click_hs_itm3();
});

[Mummers]

function openhide(){
document.querySelector('.hide_sett_passive').classList.add('hide_sett_active');
document.querySelector('.hide_sett_passive').classList.remove('hide_sett_passive');
};
function closehide(){
document.querySelector('.hide_sett_active').classList.add('hide_sett_passive');
document.querySelector('.hide_sett_active').classList.remove('hide_sett_active');
};

function openprebook(){
document.querySelector('.preblock_passive').classList.add('preblock_active');
document.querySelector('.preblock_passive').classList.remove('preblock_passive');
};
function closeprebook(){
document.querySelector('.preblock_active').classList.add('preblock_passive');
document.querySelector('.preblock_active').classList.remove('preblock_active');
};

function apply_classes(selector, add, remove) {
var el = document.querySelector(selector);
if (el) {
el.classList.add(add);
el.classList.remove(remove);
}
}
function open_prebooksItems1() {
apply_classes('.preblock_hs_itm1_passive', 'preblock_hs_itm1_active', 'preblock_hs_itm1_passive');
}
function close_prebooksItems1() {
apply_classes('.preblock_hs_itm1_active', 'preblock_hs_itm1_passive', 'preblock_hs_itm1_active');
}
function open_prebooksItems2() {
apply_classes('.preblock_hs_itm2_passive', 'preblock_hs_itm2_active', 'preblock_hs_itm2_passive');
}
function close_prebooksItems2() {
apply_classes('.preblock_hs_itm2_active', 'preblock_hs_itm2_passive', 'preblock_hs_itm2_active');
}
function open_prebooksItems3() {
apply_classes('.preblock_hs_itm3_passive', 'preblock_hs_itm3_active', 'preblock_hs_itm3_passive');
}
function close_prebooksItems3() {
apply_classes('.preblock_hs_itm3_active', 'preblock_hs_itm3_passive', 'preblock_hs_itm3_active');
}

function close_when_all_close(){
document.querySelector('.cl').addEventListener("click", function() {
closehide();
closeprebook();
close_prebooksItems1();
close_prebooksItems2();
close_prebooksItems3();
})
};

function MakeActive_hide_sett_passive(){
document.querySelector('.shesterenki').addEventListener("click", function() {
openhide();
});
};

function click_hs_itm1(){
document.querySelector('.hs_itm1').addEventListener("click", function() {
openprebook();
open_prebooksItems1();
close_prebooksItems2();
close_prebooksItems3();
});
};
function click_hs_itm2(){
document.querySelector('.hs_itm2').addEventListener("click", function() {
openprebook();
open_prebooksItems2();
close_prebooksItems1();
close_prebooksItems3();

});
};
function click_hs_itm3(){
document.querySelector('.hs_itm3').addEventListener("click", function() {
openprebook();
open_prebooksItems3();
close_prebooksItems1();
close_prebooksItems2();
});
};

document.addEventListener("DOMContentLoaded", function() {
close_when_all_close();
MakeActive_hide_sett_passive();
click_hs_itm1();
click_hs_itm2();
click_hs_itm3();
});

[RAX7]

Потому что jquery`ный addClass добавляет класс всем элементам

Adds the specified class(es) to each element in the set of matched elements.
https://api.jquery.com/addClass/

а твоя функция apply_classes только к первому попавшемуся

[Пашенька]

Господе Иисусе, пока пролистал с телефона - утомился.

Не вникая от слова совсем, предположу, что проблема в выборке элементов, а именно javasctpt’ом выбирается лишь первый элемент, в то время когда jquery обрабатывает все благодаря циклу под капотом.

[Степан Крапивин]

выложи в песочницу codepen или jsfiddle

[Сергей Соколов]

слишком много кода для типичного «спрячь остальных, покажи одного»
лень вчитываться, но видны повторы кода. Для каждого айтема расписывать отдельную функция скорее всего – неправильно.

Больше кода — больше шансов для ошибок.

[alex4answ]

или хотябы спойлеры для когда используйте

[Ankhena]

Это фу-фу-фу код. Что там что там.

Суть: при клике на какой-то элемент, ВСЕ нужно закрыть и открыть нужный.
Т.е. у всех убрать класс, который отвечает за открывание и одному добавить.

А у вас не простыня, а целый пододеяльник кода.

[Пашенька]

Ankhena, простыня, заправленная в пододеяльник)

[Mummers]

Пашенька, угадал :3

[Mummers]

RAX7, да, спасибо, разобрался.

[Mummers]

Это не говнокод, а суперархитектура!!11
p.s. Спасиб и сори за говнокод)

[Пашенька]

Mummers, опыт не пропьёшь :)

Answer 1

[Kozlov]

Функции для добавления и удаления классов всех найденных элементов без jQuery.

addClass

function addClass(findElems, addClass){
  let elems = document.querySelectorAll(findElems)
  for (let elem of elems){
  	elem.classList.add(addClass)
  }
};

removeClass

function removeClass(findElems, delClass){
  let elems = document.querySelectorAll(findElems)
  for (let elem of elems){
  	elem.classList.remove(delClass)
  }
};