0

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

$(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>

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

2 ответа 2

1

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

0
1

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

$(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>

8
  • количество терминалов всегда соответствует количеству пользователей?
    – Greg--
    8 сен 2020 в 10:34
  • Последовательность пользователей и терминалов совпадают (от 1 до n) или последовательность может быть случайной?
    – Greg--
    8 сен 2020 в 10:38
  • На данном этап количество терминало совпадает с количеством пользователей. Но пользователей может стать больше) Последовательность не случайна. Есть как бы администратор который говорит пользователю какой терминал ему доступен. Все остальные терминалы пользователю запрещены для использования. Данный сайт является визуализацией системы АДЕПТ-50 в рамках лабораторной работы.
    – O.Yudin
    8 сен 2020 в 21:30
  • Возможен вариант что пользователю 1 доступен терминал 2 или пользователю доступны два и более терминалов?
    – Greg--
    9 сен 2020 в 14:14
  • От задачи зависит решение, если количество терминалов и индекс всегда соответствует индексу пользователя, то решение в несколько рядков. Если количество пользователей n и количество терминалов m и одному пользователю может соответствовать любой из m или несколько терминалов, то решение нужно преобразовать, как вариант, в обработку json массива пользователей и соответствующие доступные терминалы для пользователя, что в итоге можно заменить будет на обработку запроса от сервера
    – Greg--
    9 сен 2020 в 14:21

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.