Javascript停止输入多个类名

Question

I am a simple problem here with JavaScript. I have this JS code which I use to highlight rows in a price table. The issue is that if I used multiple class names at a time it stops working. For example:

<div class="el1 someclass">Hover does not work in this</div>

<div class="el1">Hover does work in this</div>

The JS:

var classes = ["el1", "el2", "el3", "el4", "el5", "el6", "el7", "el8", "el9","el10","el11","el12", "el13","el14","el15","el16","el17","el18","el19","el20","el21","el22", "el23", "el24","el25" ]; //list of your classes
var elms = {};
var n = {}, nclasses = classes.length;
function changeColor(classname, color) {
    var curN = n[classname];
    for(var i = 0; i < curN; i ++) {
        elms[classname][i].style.backgroundColor = color;
    }
}
for(var k = 0; k < nclasses; k ++) {
    var curClass = classes[k];
    elms[curClass] = document.getElementsByClassName(curClass);
    n[curClass] = elms[curClass].length;
    var curN = n[curClass];
    for(var i = 0; i < curN; i ++) {
        elms[curClass][i].onmouseover = function() {
            changeColor(this.className, "#dbdbdb");
        };
        elms[curClass][i].onmouseout = function() {
            changeColor(this.className, "transparent");
        };
    }
};

Can somebody help me out please, I'm a newbie in JS.

Thanks ..

Answer 1

 var classes = ["el1", "el2", "el3", "el4", "el5", "el6", "el7", "el8", "el9","el10","el11","el12", "el13","el14","el15","el16","el17","el18","el19","el20","el21","el22", "el23", "el24","el25" ]; //list of your classes var elms = {}; var n = {}, nclasses = classes.length; function changeColor(classname, color) { var curN = n[classname]; for(var i = 0; i < curN; i ++) { elms[classname][i].style.backgroundColor = color; } } for(var k = 0; k < nclasses; k ++) { var curClass = classes[k]; elms[curClass] = document.getElementsByClassName(curClass); n[curClass] = elms[curClass].length; var curN = n[curClass]; for(var i = 0; i < curN; i ++) { elms[curClass][i].onmouseover = function() { changeColor(this.className.split(' ')[0], "#dbdbdb"); }; elms[curClass][i].onmouseout = function() { changeColor(this.className.split(' ')[0], "transparent"); }; } }; 

 <div class="el1 someclass">Hover does not work in this</div> <br><br><br><br><br><br> <div class="el1">Hover does work in this</div> 

The problem was with the

function changeColor(classname, color) {
    var curN = n[classname];
    for(var i = 0; i < curN; i ++) {
        elms[classname][i].style.backgroundColor = color;
    }
}

Here you're assigning hover to each element where this reference would

>>            changeColor(this, "#dbdbdb");

pass the only one element and will change the color

Answer 2

The className property on a dom element returns the complete className; that is, if some element has multiple classes (eg <div class="herp derp"></div> ), then className = "herp derp" .

If you want to call changeColor on each of these multiple classes, try something like this:

// first, change the order of the arguments on the changeColor function so we can pre-apply the color argument
function changeColor(color, classname) {
    var curN = n[classname];
    for(var i = 0; i < curN; i ++) {
        elms[classname][i].style.backgroundColor = color;
    }
}

Now, we can change how we call changeColor

// now, where you previously called changeColor, do something like this
this.className.split(" ").forEach(changeColor.bind(null, "transparent"));
// we now will call changeColor on all of the classes of this with the appropriate color ("transparent" or "#dbdbdb")

Answer 3

Check out the fiddle I created. The problem is when you are trying to change color you are again passing in the class name and trying to select the element again while you already have the reference to the element where you are changing the background color. So pass on the element directly and change the background.

http://jsfiddle.net/5eLhsqxv/

`

var n = {}, nclasses = classes.length;
function changeColor(elm, color) {
        elm.style.backgroundColor = color;
}
for(var k = 0; k < nclasses; k ++) {
    var curClass = classes[k];
    elms[curClass] = document.getElementsByClassName(curClass);
    console.log(elms[curClass]);
    console.log(curClass);
    n[curClass] = elms[curClass].length;
    var curN = n[curClass];
    for(var i = 0; i < curN; i ++) {
        console.log(elms[curClass][i]);
        elms[curClass][i].onmouseover = function() {
            changeColor(this, "#dbdbdb");
        };
        elms[curClass][i].onmouseout = function() {
            changeColor(this, "transparent");
        };
    }
};

`