클릭시 특정 버튼의 배경색 변경

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

각 버튼을 클릭하면 회색으로 변합니다. 이 같은 아마 뭔가 :

$(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); 
     }); 
    }); 
}); 

});