Добавить класс другому блоку при нажатии на ссылку JQuery

Question

Нужно при нажатии на ссылку добавить класс другому блоку. И таких ссылок несколько штук. Мой код не работает, в чем проблема?

$(document).ready(function() {
    // Добавить/убрать класс при клике на Пользователя
    $("#user ul li a").click(function(e) {
        e.preventDefault();
        $("#user ul li a").removeClass('active');
        $(this).addClass('active');
    });
    // При нажатии на пользователя подчеркнуть его возможности
    $('li .user-1').on("click", function() {
        $('.terminal').removeClass("active");
        $('.terminal-2').addClass("active");
        return false;
    });
    $('li .user-2').on("click", function() {
        $('.terminal-2', '.terminal-3', '.terminal-4', '.terminal-5').removeClass("active");
        $('.terminal-1').addClass("active");
        return false;
    });
 });

.user a {
    color: #e225e2;
}
.user .active {
    transition: ease-in-out .1s;
    background: #cf4dcf;
    color: #fff;
}
.terminal.active {
    background: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="user" id="user">
            <h2>Пользователи</h2>
            <ul>
                <li class="user-wrap">
                    <a href="#" class="user-1" id="user1">Пользователь 1</a>
                </li>
                <li class="user-wrap">
                    <a href="#" id="user2">Пользователь 2</a>
                </li>
                <li class="user-wrap">
                    <a href="#" id="user3">Пользователь 3</a>
                </li>
                <li class="user-wrap">
                    <a href="#" id="user4">Пользователь 4</a>
                </li>
                <li class="user-wrap">
                    <a href="#" id="user5">Пользователь 5</a>
                </li>
            </ul>
        </div>
        <div class="terminal-wrap">
            <h2>Терминалы</h2>
            <ul>
                <li class="terminal terminal-1" id="terminal1">Терминал 1</li>
                <li class="terminal terminal-2" id="terminal2">Терминал 2</li>
                <li class="terminal terminal-3" id="terminal3">Терминал 3</li>
                <li class="terminal terminal-4" id="terminal4">Терминал 4</li>
                <li class="terminal terminal-5" id="terminal5">Терминал 5</li>
            </ul>
        </div>

Заранее спасибо за ответ.

Answer 1

Не работает так как нет такого элемента как li .user-2, к примеру есть li #user2 В строке $('li .user-2').on(...) указан класс которого нет

Answer 2

Проблема заключалась в том, что я забыл добавить классы остальным пользователям. Дописал код, он максимально понятный, если есть возможность оптимизировать такой код, присылайте ответы)

$(document).ready(function() {
    // Добавить/убрать класс при клике на Пользователя
    $("#user ul li a").click(function(e) {
        e.preventDefault();
        $("#user ul li a").removeClass('active');
        $(this).addClass('active');
    });
    // При нажатии на пользователя подчеркнуть его возможности
    $('li .user-1').on("click", function() {
        $('.terminal').removeClass("active");
        $('.terminal-2').addClass("active");
        return false;
    });
    $('li .user-2').on("click", function() {
        $('.terminal').removeClass("active");
        $('.terminal-1').addClass("active");
        return false;
    });
    $('li .user-3').on("click", function() {
        $('.terminal').removeClass("active");
        $('.terminal-4').addClass("active");
        return false;
    });
    $('li .user-4').on("click", function() {
        $('.terminal').removeClass("active");
        $('.terminal-5').addClass("active");
        return false;
    });
    $('li .user-5').on("click", function() {
        $('.terminal').removeClass("active");
        $('.terminal-3').addClass("active");
        return false;
    });
    });

body {
    font-family: Verdana;
    background: #3b3a3d;
}
a {
    text-decoration: none;
}
h2 {
    color: #ee82ee;
}
.wrap {
    display: flex;
    flex-direction: row;
}
.wrap ul {
    padding: 0;
    text-align: center;
}
.wrap li {
    list-style: none;
    padding: 5px 0;
    color: #b35eb3;
}
.user a {
    color: #e225e2;
}
.user .active {
    transition: ease-in-out .1s;
    background: #cf4dcf;
    color: #fff;
}
.terminal.active {
    background: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="user" id="user">
            <h2>Пользователи</h2>
            <ul>
                <li class="user-wrap">
                    <a href="#" class="user-1" id="user1">Пользователь 1</a>
                </li>
                <li class="user-wrap">
                    <a href="#" class="user-2" id="user2">Пользователь 2</a>
                </li>
                <li class="user-wrap">
                    <a href="#" class="user-3" id="user3">Пользователь 3</a>
                </li>
                <li class="user-wrap">
                    <a href="#" class="user-4" id="user4">Пользователь 4</a>
                </li>
                <li class="user-wrap">
                    <a href="#" class="user-5" id="user5">Пользователь 5</a>
                </li>
            </ul>
        </div>
        <div class="terminal-wrap">
            <h2>Терминалы</h2>
            <ul>
                <li class="terminal terminal-1" id="terminal1">Терминал 1</li>
                <li class="terminal terminal-2" id="terminal2">Терминал 2</li>
                <li class="terminal terminal-3" id="terminal3">Терминал 3</li>
                <li class="terminal terminal-4" id="terminal4">Терминал 4</li>
                <li class="terminal terminal-5" id="terminal5">Терминал 5</li>
            </ul>
        </div>

БЛОГ НА HUSL

Добавить класс другому блоку при нажатии на ссылку JQuery

Ответы (2 шт):