Gibt es eine Möglichkeit in Javascript für die Einstellung unterschiedlicher Farbe auf Schaltfläche für verschiedene Text-Wert - Javascript

Nur die Schaltflächen haben dieselbe Farbe und denselben Testwert wie die Github-Tags.

Danke im Voraus.

Antworten:

Sie sollten sich zuerst selbst versuchen und Ihren Code mitteilen, was Sie bei der Fragestellung versucht haben.

Holen Sie sich alle Schaltflächen, vergleichen Sie dort die Textwerte und setzen Sie die Hintergrundfarben.

function changeButtonsBgColors() {
var buttons = document.getElementsByTagName("button");
for (var i = 0; i < buttons.length; i++) {
var button = buttons[i];
if (button.value == "Close") button.style.background = "#C0C0C0";
else if (button.value == "Ok") button.style.background = "#33FF3F";
else if (button.value == "Done") button.style.background = "#4AC91B";
else if (button.value == "Delete") button.style.background = "#FF0000";
}
}

Denken Sie daran, diesen Code entweder in zu haben onload Veranstaltung oder am unteren Rand der Seite.

Es ist absolut machbar. Wenn Sie davon ausgehen, dass Sie jquery verwenden, sieht es ungefähr so ​​aus:

var bttnText = $(".button-class").html();
if(bttnText == "some text"){
$(".button-class").addClass("some-class");
}

Wenn Sie jQuery verwenden, versuchen Sie Folgendes: Jedes Etikett, das Sie mit einem Klassenfarbentext haben, wird mit einer zufälligen Farbe versehen. Wenn es mit dem Text eines anderen Etiketts übereinstimmt, verwendet es dieselbe Farbe. Hier ist ein jsfiddle-Link, um zu sehen, wie es funktioniert.

https://jsfiddle.net/jamiguel77/atg5m6ym/

$(document).ready(function() {
var colors = [];
$(".color-text").each(function(key,value){
if(colors[$(value).text()]) {
$(value).css("color", colors[$(this).text()]);
} else {
var color = getRandomColor();
$(value).css("color", color);
colors[$(value).text()] = color;
}
});
});

function getRandomColor() {
var letters = "0123456789ABCDEF";
var color = "#";
for (var i = 0; i < 6; i++ ) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}