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

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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