• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

Listenzeilen-CSS abhängig vom Inhalt eines enthaltenen Elements einfärben

B

Badenia

New member
Hallo,

Der Hintergrund und die Schriftfarbe einer Listenzeile <LI> soll abhängig vom enthaltenen Text in "va_name" eingefärbt werden. Der Textinhalt in "va_name" kann ausschließlich "Event AAA" bis "Event DDD" sein. Welches JS kann dies lösen?

HTML: 
<ul>
  <li style="background-color:#ffdcdc; color:#C00;">
    <p class="va_name">Event AAA</p>
    <p class="va_startdatum">1. Dezember 2016</p>
  </li>
  <li style="background-color:#fffddc; color:#630;">
    <p class="va_name">Event CCC</p>
    <p class="va_startdatum">8. Dezember 2016</p>
  </li>
  <li style="background-color:#dfffdc; color: #060;">
    <p class="va_name">Event BBB</p>
    <p class="va_startdatum">10. Dezember 2016</p>
  </li>
  <li style="background-color:#dce8ff; color:#00C">
    <p class="va_name">Event DDD</p>
    <p class="va_startdatum">12. Dezember 2016</p>
  </li>
  <li style="background-color:#fffddc; color:#630;">
    <p class="va_name">Event CCC</p>
    <p class="va_startdatum">16. Dezember 2016</p>
  </li>
</ul>

Herzlichen Dank für Eure Unterstützung!
 
Zuletzt bearbeitet:
Hallo mikdoe,
Danke für die schnelle Antwort.
Aktuell werden die <LI> Codezeilen ohne Farben, grafisch also alle gleich, ausgegeben.
Das beabsichtigte Skript soll nun prüfen und folgendes ausführen:
Handelt es sich bei dem <LI> um Event AAA => dann füge " style="background-color:#ffdcdc; color:#C00;" ein.
Handelt es sich bei dem <LI> um Event BBB => dann füge " style="background-color:#dfffdc; color: #060;" ein.
usw.
 
ok verstanden.
und was ist jetzt genau die frage?
man iteriert durch die nodes und setzt dann nach abhängigkeit die farben z. b. mit .style.backgroundColor='#ffdcdc'
 
Welches JS kann dies lösen?
Ich bin JS-Anfänger. Somit kann ich mit "iteriert durch die nodes" noch nichts anfangen.
Gibt es vielleicht irgendwo ein Skript, welches Ähnliches kann und auf das ich aufbauen kann?
Falls erforderlich könnte ich 'class="va_name"' in 'id="va_name"' ändern.
 
Ja das ist mit javascript zu machen .
warum kannst du den LI-tags nicht gleich eine passende Klasse geben zb class="ccc" ;
oder zur Klasse va_name noch ccc od bbb dann wäre das schon viel einfacher zu handhaben.
oder ein data-set Attribut wäre einfacher auszulesen als den TextContent.
Nur so zu HTML P Tags in Li Tags ist nicht valides HTML5. span wäre erlaubt.
HTML: 
<!DOCTYPE html>

<html lang="en">
<head>
		<meta charset="UTF-8" />
		<meta name="description" content=""/>
		<meta name="keywords" content=""/>
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<title>Streifen-Liste</title>
		
<style>

ul{width:250px;border:1px solid #000;list-style:none;}
ul li{display:inline-block; margin-top:8px;width:inherit;}

.aaa{background-color:#ffdcdc; color:#C00;}
.bbb{background-color:#dfffdc; color: #060;}
.ccc{background-color:#fffddc; color:#630;}
.ddd{background-color:#dce8ff; color:#00C;}

</style>
</head>
<body>
	<ul>
  <li>
    <span  class="va_name">Event AAA  </span><br>
     <span class="va_startdatum">1. Dezember 2016 </span>
  </li>
  <li>
     <span class="va_name"> Event CCC </span><br>
     <span class="va_startdatum">8. Dezember 2016 </span>
  </li>
  <li>
     <span class="va_name">Event BBB</span><br>
    <span class="va_startdatum">10. Dezember 2016 </span>
  </li>
  <li>
     <span class="va_name">Event DDD</span><br>
     <span class="va_startdatum">12. Dezember 2016 </span>
  </li>
  <li>
     <span class="va_name">Event CCC</span><br>
     <span class="va_startdatum">16. Dezember 2016 </span>
  </li>
</ul>		
		
<script>

function v_namen()
{
var alleVa = document.querySelectorAll('ul li .va_name');

for(var i = 0 ;i < alleVa.length;i++)
{
var dmy = alleVa[i];
 switch (dmy.textContent.trim())
 {
      case  'Event AAA' : dmy.parentElement.classList.add('aaa');break;
      case  'Event BBB' : dmy.parentElement.classList.add('bbb');break;
      case  'Event CCC' : dmy.parentElement.classList.add('ccc');break;
      case  'Event DDD' : dmy.parentElement.classList.add('ddd');break;
	  default : break;
 }
}
}
  v_namen();
</script>

</body>
</html>
 
Zuletzt bearbeitet von einem Moderator:
@andreax: warum arbeitest du mit globalen Variablen? this zeigt in deinem Fall auf window, wodurch z.B. this.dmy eine globale Variable produziert.

Auch würde die Events nicht fest im JS hinterlegen. Macht das Ganze nur schwerer zu warten:
Code: 
<!DOCTYPE html>

<html>
<head>
		<title>Streifen-Liste</title>
		
<style>

ul{width:250px;border:1px solid #000;list-style:none;}
ul li{display:inline-block; margin-top:8px;width:inherit;}

.aaa{background-color:#ffdcdc; color:#C00;}
.bbb{background-color:#dfffdc; color: #060;}
.ccc{background-color:#fffddc; color:#630;}
.ddd{background-color:#dce8ff; color:#00C;}

</style>
</head>
<body>
	<ul>
  <li>
    <span  class="va_name">Event AAA  </span><br>
     <span class="va_startdatum">1. Dezember 2016 </span>
  </li>
  <li>
     <span class="va_name"> Event CCC </span><br>
     <span class="va_startdatum">8. Dezember 2016 </span>
  </li>
  <li>
     <span class="va_name">Event BBB</span><br>
    <span class="va_startdatum">10. Dezember 2016 </span>
  </li>
  <li>
     <span class="va_name">Event DDD</span><br>
     <span class="va_startdatum">12. Dezember 2016 </span>
  </li>
  <li>
     <span class="va_name">Event CCC</span><br>
     <span class="va_startdatum">16. Dezember 2016 </span>
  </li>
</ul>		
		
<script>

(function v_namen(){
	Array.prototype.slice.call(document.querySelectorAll('ul li .va_name')).forEach(function(dmy){
		var match = dmy.textContent.match(/^\s*event\s+(\w+)\s*$/i);
		if (match){
			dmy.parentElement.classList.add(match[1].toLowerCase())
		}
	});
}());
</script>

</body>
</html>
 
@kkapsner Danke für den hinweis.
ich wollte zuerst eine Klasse verwenden und hab dann aber das this nicht mehr gegen var getauscht und weils im Test funktioniert hat ist es mir nicht weiter aufgefallen. ich bessere es aber noch aus
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben