как настроить цикл for, где единственное, что меняется, это идентификатор

Question

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

Вот что я хочуцикл for:

$("episode1").click(
function () {
    if ($("#episode2").hasClass('clicked')) {
        $("#episode2").removeClass('clicked');
    }
    else if ($("#episode3").hasClass('clicked')) {
        $("#episode3").removeClass('clicked');
    }
    else if ($("#episode4").hasClass('clicked')) {
        $("#episode4").removeClass('clicked');
    }
    else if ($("#episode5").hasClass('clicked')) {
        $("#episode5").removeClass('clicked');
    }
    else if ($("#episode6").hasClass('clicked')) {
        $("#episode6").removeClass('clicked');
    }
    else if ($("#episode7").hasClass('clicked')) {
        $("#episode7").removeClass('clicked');
    }
    else if ($("#episode8").hasClass('clicked')) {
        $("#episode8").removeClass('clicked');
    }
    else if ($("#rogueone").hasClass('clicked')) {
        $("#rogueone").removeClass('clicked');
    }
    else if ($("#solo").hasClass('clicked')) {
        $("#solo").removeClass('clicked');
    }
});

как бы настроить массив?просто по тэгам id?

Answer 1

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

const ids = ["episode2", "episode3", "episode4", "episode5", "episode6", "episode7", "episode8", "rogueone", "solo"];
$.each(ids, function(i, id) {
    if ($("#" + id).hasClass("clicked")) {
        $("#" + id).removeClassClass("clicked");
        return false;
    }
});

Возвращение false из функции обратного вызова завершает цикл.

Но если порядок элементов в DOM совпадает с порядком в массиве, вы можете упростить его до:

$(".episodescroll.clicked").not(this).first().removeClass("clicked");

Answer 2

Дайте им всем общий класс, кроме clicked, и тогда это будет простой

$('.episodescroll.clicked').removeClass('clicked');

Если вы хотите исключить тот, на который только что нажали, вы можете сделать:

$('.episodescroll.clicked').not(this).removeClass('clicked');

В противном случае вы можете просто выбрать несколько элементов.

$("#episode2, #episode3, #episode4").removeClass('clicked');

Хотя я бы предложил пойти по первому маршруту.