Wenn Checkbox aktiv, aktiviere Button & ändere Farbe des Button?

1 Antwort

Vom Fragesteller als hilfreich ausgezeichnet

CSS kannst du in der Regel mit der css-Funktion setzen.

Beispiel:

$("#datenschutz_submit").css("background-color", "blue");

Noch besser wäre es allerdings, CSS und JS strikter voneinander zu trennen. Füge dem class-Attribut des Button einen Wert hinzu, wenn er aktiviert wird und entferne diesen wieder bei Deaktivierung. Die Funktion toggleClass eignet sich hier sehr gut:

$("#datenschutz_submit").toggleClass("active");

Der CSS-Klassenselektor für active müsste dann natürlich noch im CSS ergänzt werden:

.active {
  background-color: blue;
}  

Alternativ zu toggleClass kannst du auch mit addClass und removeClass arbeiten und die Logik damit freier bestimmen.

let button = $("#datenschutz_submit");

if (this.checked) {
  button.addClass("active");
}
else {
  button.removeClass("active");
}

Ein Fiddle zu der toggleClass-Lösung: https://jsfiddle.net/1krayzvc/. Den Button würde ich, wie du siehst, auch im initialen Zustand bereits deaktivieren. Wie du den CSS-Selektor gestaltest, bleibt dir überlassen.

25

Vielen Dank. ich habe es zwischenzeitlich gelöst bekommen. Wobei deine Lösung viel einfacher aussieht als meine .

<script type="text/javascript">
//Datenschutz btn 
$(document).ready(function() { 
 
		$("#datenschutzOkay").click(function() {
		  $("#datenschutz_submit").attr("disabled", !this.checked);
		  
		  var elems = document.querySelectorAll('.check-box');
			var btn = document.querySelector('.btn-elem');
			[].forEach.call(elems, function(el) {
			 el.addEventListener('change', function() {
				var checked = document.querySelectorAll('.check-box:checked');
				if (checked.length) {
				 btn.style.backgroundColor = '#69F';
				} else {
				 btn.style.backgroundColor = '#f0f0f0';
				}
			 });
			});

	});
 
});
 
</script>
0
43
@MoechteAWissen

Ja, so wie bei deiner Lösung solltest du folgend nicht mehr vorgehen, denn du vermischt da Funktionen der DOM API (querySelectorAll, addEventListener, style.backgroundColor) mit jQuery. jQuery soll dir die Verwendung der DOM API allerdings abnehmen.

// JS DOM
var elems = document.querySelectorAll('.check-box');
// jQuery
var elems = $('.check-box');

// JS DOM
el.addEventListener('change', function() { /* ... */
// jQuery
el.on('change', function() { /* ... */

// JS DOM
btn.style.backgroundColor = '#69F';
// jQuery
btn.css("background-color", "#69f");

Das Framework bietet nicht nur eine Verkürzung der Bezeichner, sondern in manchen Fällen auch ein internes Behandeln von Browserunterschieden. Bestes Beispiel sind Funktionen für Größenberechnungen. Jeder Browser berechnet bspw. die Breite von Elementen etwas anders. Die jQuery-Funktionen decken dies bereits ab.

1
25
@regex9

habs bereits übernommen. Alter Schwede, dein Wissen hätte ich gerne :) . Nochmals vielen Dank :)

0

Menü schließt sich nicht? Menü verschwindet nicht beim klicken?

Hallo liebe Gute Frage Gemeinde.

Ich sitze gerade an einem Menü für eine Webseite.

Wenn ich in die Handy-optimierte Version gehe bzw das Menü standardmäßig verkleinere, greift ganz normal die SR-Only Class von bootstrap.

Es funktioniert auch. Allerdings wenn ich dass erste mal klicke, öffnet sich das Menü und beim klicken auf einen Link bzw zu einer Seite, bleibt das Menü leider offen.

Wieso schließt sich das Menü nicht?

Woran liegt das?

https://www.hastebin.com/olatacekob.xml

Und dann habe ich noch eine zweite Frage!

Ich habe einen collapse Button eingebaut der sich beim Klicken öffnet. Das funktioniert auch, allerdings nur bei großen Display. Auf dem Handy kann man den Button nicht mehr anklicken!

Woran liegt das?

Lg Paddy

...zur Frage

Effekt - FadeIn FadeOut - JavaScript/Jquery

Hi ich benutze diesen Code um eine Subnavi umzusetzen er funktioniert wunderbar. ;) Nur möchte ich gerne das es nicht so plump an und aus geht. Ich habe gesehen das man mit Jquery FadeIn und FadeOut nutzen kann. Aber verstanden wie ich es in die Funktion setzte habe ich noch nicht. :D

<script language="JavaScript" type="text/javascript">
<!--
function einblenden(element){
  document.getElementById(element).style.display = 'block';
}
//-->

<!--
function ausblenden(element){
  document.getElementById(element).style.display = 'none';
}
//-->
</script>

Jquery habe ich so eingebunden:

<script src="<a href="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js</a>"></script>

Kan mir einer sagen wie ich ein FadeIn und ein FadeOut in die Funktionen kriege ??

...zur Frage

Wie kann ich prüfen, ob ein Button mit einer bestimmten Klasse gedrückt wurde (jQuery, PHP)?

Hallo,

ich habe Tabelle mit variabler Länge und bei jedem Eintrag soll ein Button in einer Zelle angelegt werden. Alle haben die gleiche Klasse.

Nun soll per jQuery beim Klick auf einer der Button ein Event ausgelöst werden.

ich hab es versucht mit:

$('.btn-update').click(function() {
    console.log("Hallo");
});

Leider hatte das nicht funktioniert.

Die "ready"-Funktion ist bei mir natürlich auch vorhanden.

Selbige Funktion nur mit einer ID in den Klammern anstelle der Klasse hatte aber funktioniert.

Danke schön :)

...zur Frage

Timer mit JavaScript?

Ich möchte mit JavaScript einen Timer programmieren. Der User soll die Zeit einstellen können bspw 60min und dann soll der Timer runterzählen. Wenns bei 00:00:00 ist, soll ein neuer Bildschirm aufgerufen werden.

Ich hab leider nicht wirklich eine Ahnung wie ich das hinbekommen soll. Im Internet sind zwar Beispiele für Timer, jedoch laufen die von 0 bis unendlich.... Da ich technisch nicht so versiert bin um das ganze umzustellen, hoffe ich, dass ihr mir helfen könnt. Bis jetzt habe ich es nur hinbekommen, dass der Timer überhaupt läuft (allerdings von 0 an) und erst beginnt, wenn man auf den Start-Button drückt.

Hier meine js Datei:

$(document).ready(function() {

var timer = 0;

$( "#button_start" ).click(function() {

  setInterval(function(){ increaseTimer() }, 1000);

});

function increaseTimer(){

timer = timer +1;

$("#timer").html(timer);

};

});

Schonmal vielen Dank!

Eure Amy

...zur Frage

Wie muss ich den folgenden script ändern damit der button rot wird?

Der script ist:

// Read more button if ( apply_filters( PT_CV_PREFIX_ . 'field_content_readmore_enable', 1, $fargs['content'] ) ) { $text = apply_filters( PT_CV_PREFIX_ . 'field_content_readmore_text', __( 'mehr', PT_CV_DOMAIN ), $fargs['content'] ); $readmore .= self::_field_href( $oargs, $post, $text, PT_CV_PREFIX . 'readmore' . ' btn btn-success btn-sm' ); $readmore_btn .= '
' . $readmore;

Er stammt aus meinen wordpress theme. Momentan ist der button grün ich möchte aber das er rot wird. Der script ist in php soweit ich weiß! Danke!

...zur Frage

JavaScript Tic Tac Toe AI Programmierung?

Guten Abend Community,

ich möchte gerne ein Tic-Tac-Toe Game mit einem AI (BOT) programmieren. Der bisher programmierte Code funktioniert nur für Player vs Player. Habe schon ein bisschen rumgespielt, aber noch keine wirkliche richtige Lösung für den AI gefunden.

In dem folgenden Link, könnt Ihr mein JavaScript Code finden. (Ich weiß, kein guter Programmierstil, jedoch geht es mir momentan in erster Linie um die Funktionalität.

Könnt mir aber gegebenfalls Verbesserungsvorschläge schreiben! :)

https://pastebin.com/e3LbFp1k

Den folgenden Code habe ich einfach mal ausprobiert, jedoch funktioniert er nicht, da ich eine Endlosfunktion geschrieben habe.

function button(btn) {
    click_count++;         
    setX(btn);
    bot();
    checkForWin();
}

function setX(btn){
    button.value = "X";
    symbol = "O";
}

function bot() {
    var random_pick = [btn0, btn1, btn2, btn3, btn4, btn5, btn6, btn7, btn8]
    bot = random_pick[Math.floor(Math.random()*random_pick.length)]
    if (bot.value != "X" || "O") {
        bot.value = "O";
        click_count++;
        symbol = "X";
        button();
    }else{
        bot();
    }
}   

Vielleicht kann mir ja jemand weiterhelfen, wie ich weitermachen soll... Sitze zur Zeit etwas fest.

...zur Frage

Was möchtest Du wissen?