Блог

Я был бы признателен за любую помощь в решении проблемы с отключенной / включенной кнопкой, с которой я столкнулся. Я изучаю Jquery, поэтому решение этой проблемы станет для меня большим уроком. Я составил список пользователей, использующих классы div:

 <div class="userList">
    <div class="user">Tom</div>
    <div class="user">Ben</div>
    <div class="user">George</div>
    <div class="user">Tony</div>
</div>
  

В списке пользователей у меня есть четыре кнопки:

 <div class="actions">
    <button id="add" disabled="disabled">Add</button>
    <button id="block" disabled="disabled">Block</button>
    <button id="message" disabled="disabled">Message</button>
    <button id="exit">Exit</button>
</div>
  

Как вы можете видеть, 3 из 4 кнопок по умолчанию отключены. То, что я хочу сделать, это нажать на пользователя, который выделит пользователя цветом фона и в то же время включит 3 отключенные кнопки. Я также хотел бы настроить таргетинг на отдельные кнопки по идентификатору. Только имя пользователя, на которое я нажимаю, должно менять цвет фона и возвращаться к исходному цвету, как только я нажимаю на другое имя пользователя или за пределами div «UserList».

Это полный HTML-код:

 <div id="wrapper">

    <div class="userList">
        <div class="user">Tom</div>
        <div class="user">Ben</div>
        <div class="user">George</div>
        <div class="user">Tony</div>
    </div>

    <div class="actions">
        <button id="add" disabled="disabled">Add</button>
        <button id="block" disabled="disabled">Block</button>
        <button id="message" disabled="disabled">Message</button>
        <button id="exit">Exit</button>
    </div>

</div>
  

Это код CSS:

 @charset "utf-8";
* {
    padding:0;
    margin:0;
    font-family:Arial, Helvetica, sans-serif;
    }

#wrapper {
    width:300px;
    min-height:100px;
    background-color:#ddd;
    margin:0 auto;
    padding:20px;
    }

.userList {
    border:1px solid #aaa;
    padding:20px;
    margin-bottom:20px;
    }

.user {
    background:#eee;
    line-height:28px;
    border:1px solid #aaa;
    margin-bottom:5px;
    padding-left:10px;
    }
    .user:hover {
        background:#06F;
        color:#fff;
        border:1px solid #000;
        }

.actions {}
  

Я надеюсь, что кто-нибудь сможет мне в этом помочь! Это многому научит меня и, надеюсь, многих других людей.

Предполагая, что я правильно понял вашу проблему, тогда, возможно, что-то вроде этого подойдет:

 $('.user').click(function(event){
    removeHighlight();
    $(event.target).addClass('highlight'); // Highlight selected item
    $('.btn-action').attr('disabled', false); // Enable action buttons
});

$(document).click(function(event) {
    // If clicked element does not have the class 'userList'
    // and does not have a parent element with a class 'userList'
    if(!$(event.target).hasClass('userList') amp;amp; !$(event.target).parents('.userList').length) {
        removeHighlight();
        $('.btn-action').attr('disabled', true); // Disable action buttons
    }
});

function removeHighlight() {
    $('.user').each(function() { // Remove highlight class for any previously selected item
        $(this).removeClass('highlight');
    });
}
  

Добавьте это в свои стили:

 .user.highlight {
    background:#06F;
    color:#fff;
    border:1px solid #000;
}
  

И добавьте btn-action класс к своим кнопкам.