it-swarm.com.de

klicken Sie auf die Schaltfläche zum Ändern der Jquery-Schaltfläche

Ich habe mehrere Tasten, die ich verwende, wenn Leute eine Frage beantworten. Wie bekomme ich die Knöpfe, um die Farben zu ändern, wenn eine Person auf den Knopf klickt? Ich kenne jquery nicht, mir wurde gesagt, dass es das Beste ist, dies zu verwenden

Hier ist der Code, den ich für den HTML-Teil habe:

<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>

Ich bin wirklich neu in der Codierung, also wäre jede Art von Hilfe dankbar!

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

Klasse verwenden, Demo: - http://jsfiddle.net/BX6Df/

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

wenn Sie die Farbe bei jedem Klick umschalten möchten, können Sie Folgendes versuchen: - http://jsfiddle.net/SMNks/

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


.red
{
    background-color:red;
}

Aktualisierte Antwort für Ihren Kommentar. 

http://jsfiddle.net/H2Xhw/

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

Ich würde einfach eine eigene CSS-Klasse erstellen:

.ButtonClicked {
    background-color:red;
}

Und dann füge die Klasse bei Klick hinzu:

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

Dies sollte das tun, wonach Sie suchen, indem Sie this jsFiddle anzeigen. Wenn Sie sich für die Logik von ? und dergleichen interessieren, die ternären (oder bedingten) Operatoren , dann ist es nur eine prägnante Methode, mit der einfachen if-Logik zu prüfen, ob die Klasse bereits hinzugefügt wurde.

Sie können auch die Fähigkeit erstellen, ein "Ein/Aus" -Schaltergefühl zu haben, indem Sie die Klasse umschalten:

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

Dargestellt von this jsFiddle . Nur zum Nachdenken.

5
PlantTheIdea

Verwenden Sie css:

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

Fügen Sie diesen Code Ihrer Seite hinzu:

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

Sie müssen das Jquery-Framework in Ihren Dokumentenkopf von einem CDN einschließen, zum Beispiel:

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

Dann müssen Sie zum Beispiel ein eigenes Skript hinzufügen:

(function( $ ) {

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


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

})( jQuery );

Dieser Teil ist eine Zuordnung von $ zu jQuery, also ist es eigentlich jQuery ('selector'). Function ();

(function( $ ) {

})( jQuery );

Hier finden Sie die API von Jquery, in der alle Funktionen mit Beispielen und Erklärungen aufgelistet sind: http://api.jquery.com/

0
Wipster