изменить цвет фона определенной кнопки при нажатии

Question

Пользователь нажимает на кнопку 1, 2 и, наконец, 3. После того, как пользователь нажимает кнопку 3, появляется надпись «congrats», которая работает нормально.

Когда пользователь нажимает кнопку 1, фон этой кнопки должен стать серым, но кнопки 2 и 3 должны быть еще голубыми. Затем, когда пользователь нажимает кнопку 2, он становится серым, как только кнопка 1 уже серая, а кнопка 3 все еще должна быть синей. Затем, после того, как пользователь нажимает кнопку 3, все кнопки должны быть серого и появляется поле «congrats».

Прямо сейчас все они остаются синими, пока я не нажму кнопку 3. Как это изменить?

$(document).ready(function() { 
 

 
$('#button-1').click(function() { 
 
    $('#button-2').click(function() { 
 
     $('#button-3').click(function() { 
 
      $('.button').css({background: 'grey'}); 
 
      $('#congrat-box').fadeIn(1200); 
 
     }); 
 
    }); 
 
}); 
 
    
 
});

.button { 
 
    height: 30px; 
 
    width: 30px; 
 
    border-radius: 12px; 
 
    background: blue; 
 
    color: gold; 
 
    border: 1px solid white; 
 
    box-shadow: 0 0 3px grey; 
 
} 
 
#congrat-box { 
 
    background: orange; 
 
    font-size: 24px; 
 
    line-height: 50px; 
 
    padding: 20px; 
 
    text-align: center; 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
 
<button id="button-1" class="button">1</button> 
 
<button id="button-2" class="button">2</button> 
 
<button id="button-3" class="button">3</button> 
 
<div id="congrat-box">Congrats!!!</div>

При условии, снэк сниппет выше, но вот FIDDLE, если вы предпочитаете.

Answer 1

Добавить $(this).css({ background: 'grey' }); после каждой кнопки нажмите, чтобы сделать его поседеть. Может быть, что-то вроде этого:

$(document).ready(function() { 
 

 
    $('#button-1').click(function() { 
 
    $(this).css({ 
 
     background: 'grey' 
 
    }); 
 
    $('#button-2').click(function() { 
 
     $(this).css({ 
 
     background: 'grey' 
 
     }); 
 
     $('#button-3').click(function() { 
 
     $(this).css({ 
 
      background: 'grey' 
 
     }); 
 
     $('#congrat-box').fadeIn(1200); 
 
     }); 
 
    }); 
 
    }); 
 

 
});

.button { 
 
    height: 30px; 
 
    width: 30px; 
 
    border-radius: 12px; 
 
    background: blue; 
 
    color: gold; 
 
    border: 1px solid white; 
 
    box-shadow: 0 0 3px grey; 
 
} 
 
#congrat-box { 
 
    background: orange; 
 
    font-size: 24px; 
 
    line-height: 50px; 
 
    padding: 20px; 
 
    text-align: center; 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
 
<button id="button-1" class="button">1</button> 
 
<button id="button-2" class="button">2</button> 
 
<button id="button-3" class="button">3</button> 
 
<div id="congrat-box">Congrats!!!</div>

Answer 2

Вам нужно использовать $ (this) и , если вы не будете использовать css-массив просто использовать .css ('background', 'gray');

$(document).ready(function() { 
     $('#button-1').click(function() { 
      $(this).css('background', 'grey'); 
      $('#button-2').click(function() { 
      $(this).css('background', 'grey'); 
      $('#button-3').click(function() { 
       $(this).css('background', 'grey'); 
       $('#congrat-box').fadeIn(1200); 
      }); 
      }); 
     }); 
    }); 

Answer 3

Вот соответствующая часть:

$('#button-1').click(function() { 
    $('#button-2').click(function() { 
     $('#button-3').click(function() { 
      $('.button').css({background: 'grey'}); 
      $('#congrat-box').fadeIn(1200); 
     }); 
    }); 
}); 

Что происходит, что когда #button-1 нажата, это добавляет слушатель событий для того, когда #button-2 нажата, который добавляет слушателя событий для клика #button-3, который, наконец, делает все .button серым. Вы не делаете каждую отдельную кнопку серой, когда ее нажимают.

Решение:

$('#button-1').click(function() { 
    $(this).css({background: 'grey'}); 
    $('#button-2').click(function() { 
     $(this).css({background: 'grey'}); 
     $('#button-3').click(function() { 
      $(this).css({background: 'grey'}); 
      $('#congrat-box').fadeIn(1200); 
     }); 
    }); 
}); 

На каждом клике будет добавить слушатель к следующей кнопке, а также сделать сам серым. Demo.

Answer 4

Вы можете просто изменить код так:

$('[id^="button"]').click(function() { 
    $(this).css({background: 'grey'}); 
    if($(this).is('[id="button-3"]')){ 
     $('#congrat-box').fadeIn(1200); 
    } 
}); 

Answer 5

Эта линия $('.button').css({background: 'grey'}); только выполняется, когда эта функция хит: $('#button-3').click(function() { если вы хотите, чтобы каждая кнопка в свою очередь седеть применить класс CSS к желаемому на каждое событие клика, а не только на событие 3-го клика.

Answer 6

$(document).ready(function() { 

$('#button-1').click(function() { 
    $('.button').css({background: 'grey'}); 
    $('#button-2').click(function() { 
     $('.button').css({background: 'grey'}); 
     $('#button-3').click(function() { 
      $('.button').css({background: 'grey'}); 
      $('#congrat-box').fadeIn(1200); 
     }); 
    }); 
}); 

});