Как я могу сделать меньший JS-код в JS?

Question

У меня есть 5 классов CSS с разными типами цветов в кнопках для функции наведения, на моей странице может быть 5 кнопок с различными классами. Когда я наведите курсор на каждую кнопку, цвет должен быть установлен в соответствии с именем соответствующего класса, пока он работает нормально для меня. но теперь я могу видеть огромный код, я хочу сделать его меньше. Пожалуйста, предложите кого-нибудь.

$('[class^="button"]').parent().each(function(){
    var parentElement = $(this);
    var buttonfullwidth = $(parentElement).hasClass('buttonfullwidth');
    var buttonfullwidth_1 = $(parentElement).hasClass('buttonfullwidth_1');
    var buttonfullwidth_2 = $(parentElement).hasClass('buttonfullwidth_2');
    var buttonfullwidth_3 = $(parentElement).hasClass('buttonfullwidth_3');
    var buttonfullwidth_4 = $(parentElement).hasClass('buttonfullwidth_4');

    if(buttonfullwidth_1 !== false) {
        $(parentElement).hover(function(){
            $(this).addClass('buttonfullwidth_1');

        }, function(){
            $(this).removeClass('buttonfullwidth_1');

        });
    }
    if(buttonfullwidth_2 !== false) {
        $(parentElement).hover(function(){
            $(this).addClass('buttonfullwidth_2');

        }, function(){
            $(this).removeClass('buttonfullwidth_2');

        });
    }
    if(buttonfullwidth_3 !== false) {
        $(parentElement).hover(function(){
            $(this).addClass('buttonfullwidth_3');

        }, function(){
            $(this).removeClass('buttonfullwidth_3');

        });
    }
    if(buttonfullwidth_4 !== false) {
        $(parentElement).hover(function(){
            $(this).addClass('buttonfullwidth_4');

        }, function(){
            $(this).removeClass('buttonfullwidth_4');

        });
    }
    if(buttonfullwidth !== false) {
        $(parentElement).hover(function(){
            $(this).addClass('buttonfullwidth');

        }, function(){
            $(this).removeClass('buttonfullwidth');

        });
    }
});

Answer 1

Вам нужен CSS для этой работы, используя псевдо-селектор :hover

Псевдокласс :hover CSS соответствует, когда пользователь взаимодействует с элементом с указательным устройством, обычно он запускается, когда пользователь наводит курсор на элемент с указателем мыши.

Например, если вы хотите, чтобы эта кнопка стала синей при наведении:

.myButton {
  background-color: lightgreen;
}

.myButton:hover {
  background-color: lightblue;
}

<button class="myButton">Hover this button</button>

Обратите внимание, как я могу установить свойства элемента, когда он находится в состоянии наведения.

Так что для вашего кода вам просто нужно использовать следующие селекторы:

buttonfullwidth
buttonfullwidth:hover

buttonfullwidth_1
buttonfullwidth_1:hover

buttonfullwidth_2
buttonfullwidth_2:hover

buttonfullwidth_3
buttonfullwidth_3:hover

buttonfullwidth_4
buttonfullwidth_4:hover

так же, как я делал в моем примере.