Making jeder eine href auf meiner Website eine andere Farbe

Question

Derzeit mache ich das nur mit statischen CSS mit etwas, das aussieht wie der Code unten angezeigt.

#main-content > article.mh-loop-item.clearfix.post-95.post.type-post.status-publish.format-standard.has-post-thumbnail.hentry.category-singles.tag-kxngg-jxnes-italy > div > header > h3 > a { 
color: blue; 
} 
#main-content > article.mh-loop-item.clearfix.post-93.post.type-post.status-publish.format-standard.has-post-thumbnail.hentry.category-singles.tag-aquil-eddie-guerrero > div > header > h3 > a { 
color: red; 
} 

Und für jede Post ID erzeugt sie eine andere Farbe für diese Songs Titel wie, zu erscheinen wie auch immer ich versuche, etwas ein bisschen weiter fortgeschritten mit Javascript zu tun oder etwas, das, wenn überhaupt ein a gibt es href mit einer bestimmten Klasse generiert es eine zufällige Farbe für den Link als angezeigt werden.

Answer 1

Es kann von jquery wie unten

$(document).ready(function(){ 
 
    
 
    $('body a').each(function(){ 
 
    var color = 'rgb(' + randomNumber() + ',' + randomNumber() + ',' + randomNumber() + ')'; 
 
    $(this).css("color", color); 
 
    }); 
 
    
 
    function randomNumber(){ 
 
    return Math.floor(256*Math.random()); 
 
    } 
 
    
 
});

<a href="javascrip:void(0)">First link</a> 
 
<a href="javascrip:void(0)">Second link</a> 
 
<a href="javascrip:void(0)">Third link</a> 
 
<a href="javascrip:void(0)">Fourth link</a> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

Answer 2

Ok, wenn du das wirklich willst (verstehe nicht warum, aber ich mag es :-)). Dann zeige ich dir einen Weg. Ich werde jQuery dafür verwenden, aber frei improvisieren.

Erstellen oder bearbeiten Sie Ihre Javascript-Datei. Und folgt zusammen (Ich gehe davon aus, dass Ihr Post-Titel hat Klasse namens postTitle)

$('.postTitle').each(function() { 
    var red = Math.floor(Math.random() * 256); 
    var green = Math.floor(Math.random() * 256); 
    var blue = Math.floor(Math.random() * 256); 
    $(this).css("color", "rgb(" + red + "," + green + "," + blue + ")"); 
}) 

Answer 3

etwas wie diese Arbeit erreicht werden, versuchen Sie es bitte:

/*I just hard coded everything*/ 
 
var yourClass = "article", 
 
    hs = Array.from(document.querySelectorAll('a.' + yourClass)), 
 
    colors = ['blue', 'red', 'green', 'purple', 'black', 'blue', 'yellow', 'lime']; 
 

 
hs.forEach(function(elm) { 
 
    elm.style.color = colors[Math.floor(Math.random() * colors.length)]; 
 
})

<a href="#"> normal </a> 
 

 
<a class="article" href="#"> title1 </a> 
 
<a class="article" href="#"> title2 </a> 
 
<a class="article" href="#"> title3 </a> 
 
<a class="article" href="#"> title4 </a>