Erhalten Sie den gleichen CSS-Eigenschaftswert von 64 Klassen mit reinem Js oder jquery

Question

Ich habe 64 Farbschaltflächen in dom von js erstellt. sie haben Klassennamen wie folgt aus:

c1 
c2 
c3 
c4 

und so weiter ..

ich dies durch dieses Codes erstellt haben:

var eg_color_ul_1 = $('.eg-ul-1'); 
var eg_color_ul_2 = $('.eg-ul-2'); 

for (var linum = 1; linum < 65; linum++) { 
    var Cselector = ".c" + linum; 
    var colorMenu = $(Cselector).css("background-color"); 

    eg_color_ul_1.append("<a class=\"c" + linum + "\" color-code=\""+ colorMenu +"\"></a>"), 
    eg_color_ul_2.append("<a class=\"c" + linum + "\" color-code=\""+ colorMenu +"\"></a>"); 

} 

ich bereits alle Farbe in CSS-Stylesheet festgelegt haben. wie folgt aus:

.c1 { 
    background-color: #F44336; 
} 
.c2 { 
    background-color: #E91E63; 
} 
.c3 { 
    background-color: #9C27B0; 
} 
.c4 { 
    background-color: #673AB7; 
} 

Jetzt nicht, dass ich die Farbe in dom bekommen. zeigt es color-code="undefined"

Wie kann ich es beheben?

Es tut mir leid für den Titel. Ich kann nicht verstehen, was der Titel sein soll. Also lege ich das fest.

Edit:
Aufgrund einer Antwort von @Abdul ich meine js korrigiert haben. Aber es zeigt immer noch color-code="undefined". Als ich das log-Konsole zeigt es

rgb(244, 67, 54)            main.js:10 
63 undefined             main.js:10 

Answer 1

diese Zeile ist falsch:

var colorMenu = $(Cselector).css("background-color"); 

sollte sein:

var colorMenu = $('.' + Cselector).css("background-color"); 

OR Ihre Linie halten, aber dies ändern:

var Cselector = ".c" + linum; 
       ^notice the period 

sehen diese fiddle

Ich würde auch Ihren Code Refactoring:

https://jsfiddle.net/6551a0ku/2/

var eg_color_ul_1 = $('.eg-ul-1'); 
var eg_color_ul_2 = $('.eg-ul-2'); 

for (var linum = 1; linum < 5; linum++) { 
    var className = 'c' + linum; 
    var Cselector = '.' + className; 
    var colorMenu = $(Cselector).css("background-color"); 

    eg_color_ul_1.append(getATag(className, colorMenu)), 
    eg_color_ul_2.append(getATag(className, colorMenu)); 

} 

function getATag(className, colorMenu) { 
    var aTag = "<a class='" 
    + className 
    + "' color-code='" 
    + colorMenu 
    + "'>a</a>"; 
    return aTag; 
} 

Answer 2

Ich bin nicht vertraut mit JQuery, aber wenn element.css("property") das Äquivalent von element.style.property ist, dann ist das dein Problem, das style dort bezieht sich auf das Inline-Attribut style und gibt, während Sie ein Stylesheet verwenden, nichts zurück.

Die Lösung ist stattdessen getComputedStyle() zu verwenden, etwa so:

var eg_color_ul_1=$(".eg-ul-1"); 
var eg_color_ul_2=$(".eg-ul-2"); 
for(var linum=1;linum<65;linum++){ 
    var colorMenu=window.getComputedStyle($(".c"+linum),null).getPropertyValue("background-color"); 
    eg_color_ul_1.append("<a class=\"c"+linum+"\" data-color-code=\""+colorMenu+"\"></a>"); 
    eg_color_ul_2.append("<a class=\"c"+linum+"\" data-color-code=\""+colorMenu+"\"></a>"); 
} 

ich auch data attributes würde vorschlagen, mit eher als individuelle, um potenzielle Probleme zu vermeiden Attribute.

Answer 3

Ich glaube, es gibt ein Missverständnis, woher jQuery die Hintergrundfarbe-Eigenschaft abziehen wird. Das DOM/jQuery hat kein direktes Verständnis der CSS-Eigenschaften, die Sie bis festgelegt haben Sie verknüpfen sie mit einem DOM-Element entweder im tatsächlichen DOM oder in einem Dokumentfragment.

var eg_color_ul_1 = $('.eg-ul-1'); 
var eg_color_ul_2 = $('.eg-ul-2'); 

for (var linum = 1; linum < 65; linum++) { 
    var Cselector = ".c" + linum; 
    // the problem is here, at this point, there are no dom elements that match .cN so there is no value to return 
    var colorMenu = $(Cselector).css("background-color"); 

    eg_color_ul_1.append("<a class=\"c" + linum + "\" color-code=\""+ colorMenu +"\"></a>"), 
    eg_color_ul_2.append("<a class=\"c" + linum + "\" color-code=\""+ colorMenu +"\"></a>"); 

} 

Sie können dieses Problem beheben, indem Sie die Anker-Tags an das DOM anhängt ersten und dann Zuweisung der Farbcode-Attribut.

var eg_color_ul_1 = $('.eg-ul-1'); 
var eg_color_ul_2 = $('.eg-ul-2'); 

for (var linum = 1; linum < 65; linum++) { 
    eg_color_ul_1.append("<a class=\"c" + linum + "\"></a>"), 
    eg_color_ul_2.append("<a class=\"c" + linum + "\"></a>"); 
} 

for (var linum = 1; linum < 65; linum++) { 
    var domElement = $(".c" + linum) 
    var colorMenu = domElement.css("background-color") 
    domElement.attr('color-code', colorMenu) 
}