Tampilan Posting Berbeda berdasarkan Label

by Taufik Nurrohman

HTML

<article>
    <h4>Lorem Ipsum</h4>
Lorem ipsum dolor sit amet consectetur kampuang nan jauh dimato ambo-ambo tempe goreng...
    <span class="post-labels">Label: 
        <a href="#">Gambar</a>, 
        <a href="#">Panorama</a>, 
        <a href="#">Menyenangkan</a>
    </span>
</article>

<article>
    <h4>Lorem Ipsum</h4>
Lorem ipsum dolor sit amet consectetur kampuang nan jauh dimato ambo-ambo tempe goreng...
    <span class="post-labels">Label: 
        <a href="#">Foto</a>,
        <a href="#">Mamamia</a>,
        <a href="#">Lain-Lain</a>
    </span>
</article>

<article>
    <h4>Lorem Ipsum</h4>
Lorem ipsum dolor sit amet consectetur kampuang nan jauh dimato ambo-ambo tempe goreng...
    <span class="post-labels">Label: 
        <a href="#">Puisi</a>, 
        <a href="#">Jelek</a>, 
        <a href="#">Mengenai</a>
    </span>
</article>

<article>
    <h4>Lorem Ipsum</h4>
Lorem ipsum dolor sit amet consectetur kampuang nan jauh dimato ambo-ambo tempe goreng...
    <span class="post-labels">Label: 
        <a href="#">Mimbar</a>, 
        <a href="#">Kenangan</a>, 
        <a href="#">Menyenangkan</a>
    </span>
</article>

<article>
    <h4>Lorem Ipsum</h4>
Lorem ipsum dolor sit amet consectetur kampuang nan jauh dimato ambo-ambo tempe goreng...
    <span class="post-labels">Label: 
        <a href="#">Foto</a>, 
        <a href="#">Oke</a>, 
        <a href="#">Bosan</a>
    </span>
</article>

CSS

body {
  background-color:#eee;
  font:normal normal 11px/1.4 Arial,Sans-Serif;
  color:black;
  text-align:center;
  padding:20px 20px 30px;
}

a {color:blue}

article {
  background-color:white;
  padding:10px 14px;
  margin:0 0 10px;
  text-align:left;
  border-left:5px solid #666;    
}

article h4 {
  font-size:14px;
  font-weight:bold;
  margin-bottom:10px;    
}

.post-labels {
  display:block;
  font-weight:bold;
  padding-top:10px;
  margin-top:10px;
  border-top:1px dashed #ccc;    
}

/* Kelas ditambahkan oleh JavaScript */
article.red    {border-left-color:red;   }
article.green  {border-left-color:green; }
article.blue   {border-left-color:blue;  }
article.yellow {border-left-color:yellow;}

JavaScript

$('article').each(function() {
    if ($(this).find('.post-labels a:contains(Menyenangkan)').length) {
        $(this).addClass('red');
    } else if ($(this).find('.post-labels a:contains(Jelek)').length) {
        $(this).addClass('green');
    } else if ($(this).find('.post-labels a:contains(Bosan)').length) {
        $(this).addClass('blue');
    } else if ($(this).find('.post-labels a:contains(Mamamia)').length) {
        $(this).addClass('yellow');
    }
});