Ergebnis 1 bis 11 von 11
Like Tree1Likes
  • 1 Post By Badenia

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

  1. #1
    Badenia ist offline Grünschnabel
    registriert
    22-11-2016
    Beiträge
    4

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

    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-Code:
    <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!
    Geändert von Badenia (22-11-2016 um 15:39 Uhr)

  2. #2
    Avatar von mikdoe
    mikdoe ist offline Administrator
    registriert
    01-05-2010
    Beiträge
    7.625

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

    die li's haben doch alle farben. ich verstehe die frage nicht
    Das deutsche Javascript Forum http://forum.jswelt.de http://forum.jswelt.de/images/logoJsWeltForumV4_32x22.png
    Sorry wenn ich manchmal ohne Hallo und nur klein schreibe! Dann bin ich nicht unfreundlich sondern mit nervigem kleinem Touch Tablet zugange

  3. #3
    Badenia ist offline Grünschnabel
    registriert
    22-11-2016
    Beiträge
    4

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

    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.

  4. #4
    Avatar von mikdoe
    mikdoe ist offline Administrator
    registriert
    01-05-2010
    Beiträge
    7.625

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

    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'
    Das deutsche Javascript Forum http://forum.jswelt.de http://forum.jswelt.de/images/logoJsWeltForumV4_32x22.png
    Sorry wenn ich manchmal ohne Hallo und nur klein schreibe! Dann bin ich nicht unfreundlich sondern mit nervigem kleinem Touch Tablet zugange

  5. #5
    Badenia ist offline Grünschnabel
    registriert
    22-11-2016
    Beiträge
    4

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

    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.

  6. #6
    Avatar von andreax
    andreax ist offline Tripel-As
    registriert
    09-07-2016
    Beiträge
    211

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

    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-Code:
    <!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>
    Geändert von andreax (24-11-2016 um 16:47 Uhr) Grund: this operatoren entfernt

  7. #7
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.672

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

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

  8. #8
    Badenia ist offline Grünschnabel
    registriert
    22-11-2016
    Beiträge
    4

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

    #andreas, #kkapsner
    Vielen herzlichen Dank! Ihr habt mir sehr geholfen.
    mikdoe likes this.

  9. #9
    Avatar von mikdoe
    mikdoe ist offline Administrator
    registriert
    01-05-2010
    Beiträge
    7.625

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

    ist das damit gelöst?
    Das deutsche Javascript Forum http://forum.jswelt.de http://forum.jswelt.de/images/logoJsWeltForumV4_32x22.png
    Sorry wenn ich manchmal ohne Hallo und nur klein schreibe! Dann bin ich nicht unfreundlich sondern mit nervigem kleinem Touch Tablet zugange

  10. #10
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.672

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

    Zitat Zitat von Badenia Beitrag anzeigen
    Vielen herzlichen Dank!
    Bitte - gern geschehen.

  11. #11
    Avatar von andreax
    andreax ist offline Tripel-As
    registriert
    09-07-2016
    Beiträge
    211

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

    @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

Ähnliche Themen

  1. Inhalt abhängig von Variable
    Von matthias93 im Forum JavaScript
    Antworten: 3
    Letzter Beitrag: 30-08-2013, 16:59
  2. div Inhalt abhängig vom Hintergrundbild machen
    Von benpen im Forum JavaScript
    Antworten: 8
    Letzter Beitrag: 18-08-2010, 19:33
  3. Antworten: 0
    Letzter Beitrag: 09-09-2007, 10:54
  4. Inhalt eines DIV-Elements ändern
    Von Diazepami im Forum CSS und (X)HTML
    Antworten: 5
    Letzter Beitrag: 25-08-2004, 21:21
  5. Antworten: 7
    Letzter Beitrag: 15-07-2004, 13:51

Stichworte

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •