Как упростить запись Jquery?

Question

[Станислав Ботев]

Каким образом можно упростить эту конструкцию-мешанину из логики слайдера?
Здесь

Comments

[Сергей Тутуков]

1.

$('.slide-1').focus(function () {
        $('.number-1').css('font-weight', 'bold');
        $('.number-1').css('color', 'rgb(255, 255, 255)');
        $('.number-1').css('margin-left', '3.5vw');
        $('.number-2').css('font-weight', 400);
        $('.number-2').css('color', 'rgb(203, 203, 203)');
        $('.number-2').css('margin-left', 0);
        $('.number-3').css('font-weight', 400);
        $('.number-3').css('color', 'rgb(203, 203, 203)');
        $('.number-3').css('margin-left', 0);
        $('.number-4').css('font-weight', 400);
        $('.number-4').css('color', 'rgb(203, 203, 203)');
        $('.number-4').css('margin-left', 0);
        $('.number-5').css('font-weight', 400);
        $('.number-5').css('color', 'rgb(203, 203, 203)');
        $('.number-5').css('margin-left', 0);
        $('.number-6').css('font-weight', 400);
        $('.number-6').css('color', 'rgb(203, 203, 203)');
        $('.number-6').css('margin-left', 0);
    });
    $('.slide-2').focus(function () {
        $('.number-1').css('font-weight', 400);
        $('.number-1').css('color', 'rgb(203, 203, 203)');
        $('.number-1').css('margin-left', 0);
        $('.number-2').css('font-weight', 'bold');
        $('.number-2').css('color', 'rgb(255, 255, 255)');
        $('.number-2').css('margin-left', '3.5vw');
        $('.number-3').css('font-weight', 400);
        $('.number-3').css('color', 'rgb(203, 203, 203)');
        $('.number-3').css('margin-left', 0);
        $('.number-4').css('font-weight', 400);
        $('.number-4').css('color', 'rgb(203, 203, 203)');
        $('.number-4').css('margin-left', 0);
        $('.number-5').css('font-weight', 400);
        $('.number-5').css('color', 'rgb(203, 203, 203)');
        $('.number-5').css('margin-left', 0);
        $('.number-6').css('font-weight', 400);
        $('.number-6').css('color', 'rgb(203, 203, 203)');
        $('.number-6').css('margin-left', 0);
    });
    $('.slide-3').focus(function () {
        $('.number-1').css('font-weight', 400);
        $('.number-1').css('color', 'rgb(203, 203, 203)');
        $('.number-1').css('margin-left', 0);
        $('.number-2').css('font-weight', 400);
        $('.number-2').css('color', 'rgb(203, 203, 203)');
        $('.number-2').css('margin-left', 0);
        $('.number-3').css('font-weight', 'bold');
        $('.number-3').css('color', 'rgb(255, 255, 255)');
        $('.number-3').css('margin-left', '3.5vw');
        $('.number-4').css('font-weight', 400);
        $('.number-4').css('color', 'rgb(203, 203, 203)');
        $('.number-4').css('margin-left', 0);
        $('.number-5').css('font-weight', 400);
        $('.number-5').css('color', 'rgb(203, 203, 203)');
        $('.number-5').css('margin-left', 0);
        $('.number-6').css('font-weight', 400);
        $('.number-6').css('color', 'rgb(203, 203, 203)');
        $('.number-6').css('margin-left', 0);
    });
    $('.slide-4').focus(function () {
        $('.number-1').css('font-weight', 400);
        $('.number-1').css('color', 'rgb(203, 203, 203)');
        $('.number-1').css('margin-left', 0);
        $('.number-2').css('font-weight', 400);
        $('.number-2').css('color', 'rgb(203, 203, 203)');
        $('.number-2').css('margin-left', 0);
        $('.number-3').css('font-weight', 400);
        $('.number-3').css('color', 'rgb(203, 203, 203)');
        $('.number-3').css('margin-left', 0);
        $('.number-4').css('font-weight', 'bold');
        $('.number-4').css('color', 'rgb(255, 255, 255)');
        $('.number-4').css('margin-left', '3.5vw');
        $('.number-5').css('font-weight', 400);
        $('.number-5').css('color', 'rgb(203, 203, 203)');
        $('.number-5').css('margin-left', 0);
        $('.number-6').css('font-weight', 400);
        $('.number-6').css('color', 'rgb(203, 203, 203)');
        $('.number-6').css('margin-left', 0);
    });
    $('.slide-5').focus(function () {
        $('.number-1').css('font-weight', 400);
        $('.number-1').css('color', 'rgb(203, 203, 203)');
        $('.number-1').css('margin-left', 0);
        $('.number-2').css('font-weight', 400);
        $('.number-2').css('color', 'rgb(203, 203, 203)');
        $('.number-2').css('margin-left', 0);
        $('.number-3').css('font-weight', 400);
        $('.number-3').css('color', 'rgb(203, 203, 203)');
        $('.number-3').css('margin-left', 0);
        $('.number-4').css('font-weight', 400);
        $('.number-4').css('color', 'rgb(203, 203, 203)');
        $('.number-4').css('margin-left', 0);
        $('.number-5').css('font-weight', 'bold');
        $('.number-5').css('color', 'rgb(255, 255, 255)');
        $('.number-5').css('margin-left', '3.5vw');
        $('.number-6').css('font-weight', 400);
        $('.number-6').css('color', 'rgb(203, 203, 203)');
        $('.number-6').css('margin-left', 0);
    });
    $('.slide-6').focus(function () {
        $('.number-1').css('font-weight', 400);
        $('.number-1').css('color', 'rgb(203, 203, 203)');
        $('.number-1').css('margin-left', 0);
        $('.number-2').css('font-weight', 400);
        $('.number-2').css('color', 'rgb(203, 203, 203)');
        $('.number-2').css('margin-left', 0);
        $('.number-3').css('font-weight', 400);
        $('.number-3').css('color', 'rgb(203, 203, 203)');
        $('.number-3').css('margin-left', 0);
        $('.number-4').css('font-weight', 400);
        $('.number-4').css('color', 'rgb(203, 203, 203)');
        $('.number-4').css('margin-left', 0);
        $('.number-5').css('font-weight', 400);
        $('.number-5').css('color', 'rgb(203, 203, 203)');
        $('.number-5').css('margin-left', 0);
        $('.number-6').css('font-weight', 'bold');
        $('.number-6').css('color', 'rgb(255, 255, 255)');
        $('.number-6').css('margin-left', '3.5vw');
    });

$('.slide-1'), ..., $('.slide-6') - задай один класс и добавляй класс и удаляй у всех остальный этот класс

$('.slide').focus(function () {
    $(this).addClass('active').siblings().removeClass('active');
});

2. Слишком много однообразной писанины)
нужен пример

Answer 1

[Алексей Скляров]

$('.down-2').css('display', 'none');
        $('.down-3').css('display', 'none');
        $('.down-1').css('display', 'none');
        $('.down-5').css('display', 'none');
        $('.down-6').css('display', 'none');

Такие моменты записываются так:

$('.down-6,.down-1,.down-2,.down-3,.down-4,.down-5').css('display', 'none');

Такие моменты:

$('.number-1').css('font-weight', 400);
        $('.number-1').css('color', 'rgb(203, 203, 203)');

Записываются так:

$('.number-1').css({
   'font-weight' : '400',
   'color' : 'rgb(203, 203, 203)'
});

Это первое что бросается в глаза,но это, конечно, не все. Плюс ко всему я бы вообще изучил бы логику работы скрипта, более чем уверен, что код можно куда сильнее сократить