màu nút thay đổi jquery onclick

Question

Tôi có nhiều nút mà tôi sử dụng khi mọi người trả lời câu hỏi. Làm cách nào để tôi nhận được các nút để thay đổi màu sắc khi một người nhấp vào nút? Tôi không biết jquery, tôi đã được cho biết rằng đó là điều tốt nhất để sử dụng cho việc này

Đây là mã tôi đã cho phần 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> 

Tôi thực sự mới tại mã hóa vì vậy bất kỳ loại trợ giúp sẽ được đánh giá cao!

Answer 1

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

Sử dụng lớp, Demo: - http://jsfiddle.net/BX6Df/

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

nếu bạn muốn chuyển đổi màu sắc mỗi nhấp chuột, bạn có thể thử điều này: - http://jsfiddle.net/SMNks/

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


.red 
{ 
    background-color:red; 
} 

cập nhật câu trả lời cho bình luận của bạn .

http://jsfiddle.net/H2Xhw/

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

Answer 2

Tôi chỉ sẽ tạo ra một lớp CSS riêng biệt:

.ButtonClicked { 
    background-color:red; 
} 

Và sau đó thêm các lớp trên nhấp chuột:

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

này nên làm những gì bạn đang tìm kiếm, thể hiện bởi this jsFiddle. Nếu bạn tò mò về logic với ? và như vậy, nó được gọi là ternary (or conditional) operators, và nó chỉ là một cách ngắn gọn để làm đơn giản nếu logic để kiểm tra xem lớp đã được thêm vào chưa.

Bạn cũng có thể tạo ra khả năng có một "bật/tắt" công tắc cảm thấy bởi Toggling lớp:

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

Shown bởi this jsFiddle. Chỉ là thức ăn cho sự suy nghĩ.

Answer 3

Sử dụng css:

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

Answer 4

Thêm mã này vào trang của bạn:

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

Answer 5

Bạn phải bao gồm khuôn khổ jquery ở đầu tài liệu của bạn từ một cdn ví dụ:

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

Sau đó, bạn phải bao gồm một kịch bản riêng ví dụ:.

(function($) { 

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


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

})(jQuery); 

Phần này là một ánh xạ của $ để jQuery, vì vậy thực sự nó là jQuery ('chọn') function();

(function($) { 

})(jQuery); 

Ở đây bạn có thể tìm thấy chết api của jquery nơi mà tất cả các chức năng được liệt kê với các ví dụ và giải thích:. http://api.jquery.com/