Как компактно написать такой код?

Question

[Тимур]

Ребят, в js очень плох. Есть вот такой скрипт:

$('#cont-one').on('click', function(event) {
         $("#one-cont").addClass("activecont")
         $("#two-cont").removeClass("activecont")
         $("#three-cont").removeClass("activecont")
         $("#four-cont").removeClass("activecont")
         
         event.preventDefault();
    });
    $('#cont-two').on('click', function(event) {
         $("#one-cont").removeClass("activecont")
         $("#two-cont").addClass("activecont")
         $("#three-cont").removeClass("activecont")
         $("#four-cont").removeClass("activecont")
         
         event.preventDefault();
    });
    
    $('#cont-three').on('click', function(event) {
         $("#one-cont").removeClass("activecont")
         $("#two-cont").removeClass("activecont")
         $("#three-cont").addClass("activecont")
         $("#four-cont").removeClass("activecont")
         
         event.preventDefault();
    });
    
    $('#cont-four').on('click', function(event) {
         $("#one-cont").removeClass("activecont")
         $("#two-cont").removeClass("activecont")
         $("#three-cont").removeClass("activecont")
         $("#four-cont").addClass("activecont")
         
         event.preventDefault();
    });
});

Помогите сделать его нормальным, пожалуйста.

Answer 1

[alex-1917]

Опять вопрос про табы... мда... уже седьмой за неделю.
Когда уже выпускники за станок встанут, всю плешь проели)))

вот www.jooom.ru/toster/toster_10.html
или вот www.jooom.ru/toster/toster_6.html

Answer 2

[Антон Швец]

[
  $("#one-cont"),
  $("#two-cont"),
  $("#three-cont"),
  $("#four-cont"),
 ]
  .forEach((target, i, tabs) => target.on(
    'click',
    (event) => {
      tabs.forEach(tab => tab.removeClass("activecont"));
      target.addClass("activecont");
      event.preventDefault();
    },
  ));

типа такого
Создает 4 функции с замыканиями, при желании можно оптимизировать в одну функцию, если будет такая нужда.

Comments

[poniyur]

У вас target, это нажимаемый элемент.
А автору вроде как нужно, чтобы при клике на эти элементы, менялся класс у других (перечитайте внимательней код в вопросе):
клик на #CONT-ONE => добавляется класс для #ONE-CONT
клик на #CONT-TWO => добавляется класс для #TWO-CONT

Видите, клик на элемент одной группы элементов, меняет класс у элемента другой группы элементов
Ваш код пойдет, например, для табов, автору немного другое нужно, или я неправильно понял вопрос автора?
Я просто свой ответ писал как раз под случай, что описал сейчас (и, как я понял, автор, которому до п**ды что мы ему тут отвечаем).

[poniyur]

Ну и если он сверстает ещё табов, ему что, придется опять в js лезть, дописывать? А если их будет 10, 20, 100...?
Процитирую вас:

А вот то, что ему тут посоветовали - просто жесть, удолить и никому не показывать.

Всё делается намного проще, просто нужно чуть-чуть переверстать (уйти от id) и js-код будет буквально в 2 строки, но это не входит в рамки вопроса.
Автор хотел укоротить именно такой код, я его укоротил, вы просто скинули нерабочий, именно для автора, код.

[Антон Швец]

poniyur, берем, скроллим выше и читаем вопрос

Ребят как компактно написать такой код?

а event.preventDefault(); я действительно забыл.

[poniyur]

Антон Швец, ты правда не понял?
Клик на #one-cont действует на #cont-one (разные названия)
Ты понимаешь что твой код вообще о другом?
Ты не написал компактно, ты написал тупо другой код, с другим функционалом.
Дело даже не в preventDefault

[poniyur]

Антон Швец, это уже смешно, давай по скайпу поговорим через часов 4)

[Антон Швец]

poniyur, конечно блин я не заметил разницы. Какой идиот будет делать айди типа cont-one и one-cont. Это уже издевательство :)

[poniyur]

Антон Швец, ну вот всё наше недопонимание из-за этого))
я в своём изначальном ответе сразу указал, что лучше было бы переверстать, тогда и логика js будет проще)