jQuery изменить цвет кнопки onclick

У меня есть несколько кнопок, которые я использую, когда люди отвечают на вопрос. Как я могу заставить кнопки менять цвета, когда человек нажимает на кнопку? Я не знаю 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>

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

9
button css dotnetnuke html jquery

5 ответов

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

использовать класс, демо: -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');
});
20

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

.ButtonClicked {
    background-color:red;
}

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

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

это должно делать то, что вы ищете, показывая этот jsFiddle. Если вам интересно о логике с ? и такое, ее называют троичные (или условные) операторы, и его просто краткий способ сделать простую логику if, чтобы проверить, был ли класс уже добавлен.

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

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

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

5

используйте css:

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

добавьте следующий код на свою страницу:

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

вы должны включить структуру jquery в голову документа из cdn, например:

<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('selector').функция();

(function( $ ) {

})( jQuery );

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

0