jquery change button цвет onclick

Question

У меня есть несколько кнопок, которые я использую, когда люди отвечают на вопрос. Как я могу заставить кнопки менять цвета, когда человек нажимает кнопку? Я не знаю, JQuery, мне сказали, что это лучше всего использовать для этого

Вот код, у меня есть для HTML части:

<div style="text-align: center;"><span style="line-height: 18px; font-family: Arial, Helvetica, sans-serif; font-size: 24px;">In the past three months, how often have you used marijuana?<br /> 
<p><input type="submit" value=" Never " name="btnsubmit" id="answer" style="width: 200px;" /></p> 
<p><input type="submit" value=" Once or Twice " name="btnsubmit" id="answer" style="width: 200px;" /></p> 
<p><input type="submit" value=" Monthly " name="btnsubmit" id="answer" style="width: 200px;" /></p> 
<p><input type="submit" value=" Daily or Almost Daily " name="btnsubmit" id="answer" style="width: 200px;" /></p> 
</span></div> 
<div> 
<p style="text-align: right;"><a onclick="window.open(this.href,'_parent');return false;" href="/mobile/Static2.aspx"><input type="submit" value=" Next " name="btnsubmit" style="width: 100px;" /></a></p> 
</div> 

Я действительно новый при кодировании поэтому любой вид помощи будет оценен!

Answer 1

$('input[type="submit"]').click(function(){ 
$(this).css('color','red'); 
}); 

Используйте класс Demo: - http://jsfiddle.net/BX6Df/

$('input[type="submit"]').click(function(){ 
      $(this).addClass('red'); 
}); 

, если вы хотите, чтобы переключить цветовом каждый клик, вы можете попробовать это: - http://jsfiddle.net/SMNks/

$('input[type="submit"]').click(function(){ 
    $(this).toggleClass('red'); 
}); 


.red 
{ 
    background-color:red; 
} 

Обновленный ответ на ваш комментарий ,

http://jsfiddle.net/H2Xhw/

$('input[type="submit"]').click(function(){ 
    $('input[type="submit"].red').removeClass('red') 
     $(this).addClass('red'); 
}); 

Answer 2

Я бы просто создать отдельный класс CSS:

.ButtonClicked { 
    background-color:red; 
} 

А затем добавить класс по щелчку:

$('#ButtonId').on('click',function(){ 
    !$(this).hasClass('ButtonClicked') ? addClass('ButtonClicked') : ''; 
}); 

Это должно делать то, что вы ищете, показывая this jsFiddle. Если вам интересно узнать о логике с ? и т. Д., Это называется ternary (or conditional) operators, и это всего лишь краткий способ сделать простую логику, чтобы проверить, был ли класс уже добавлен.

Вы можете также создать возможность иметь «вкл/выкл» выключатель чувствовать переключая класс:

$('#ButtonId').on('click',function(){ 
    $(this).toggleClass('ButtonClicked'); 
}); 

Показанные на this jsFiddle. Просто пища для размышлений.

Answer 3

Использование CSS:

<style> 
input[name=btnsubmit]:active { 
color: green; 
} 
</style> 

Answer 4

Добавьте этот код на свою страницу:

<script type="text/javascript"> 
$(document).ready(function() { 
    $("input[type='submit']").click(function(){ 
     $(this).css('background-color','red'); 
    }); 
}); 
</script> 

Answer 5

Вы должны включить рамки Jquery в документе головы от КДС например:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script> 

Тогда вы должны включать в себя собственный сценарий, например:.

(function($) { 

    $(document).ready(function(){ 
     $('input').click(function() { 
      $(this).css('background-color', 'green'); 
     } 
    }); 


    $(window).load(function() { 
    }); 

})(jQuery); 

Эта часть представляет собой отображение $ в JQuery, так что на самом деле это JQuery («селектор») функция();

(function($) { 

})(jQuery); 

Здесь вы можете найти умереть апи из JQuery, где все функции перечислены примеры и объяснения:. http://api.jquery.com/