on mouseenter、クラスを追加しますが他のクラスはすべて削除してください

Question

私はdivコンテナを持ち、子は4個ありますpです。 mouseenterpの場合、親コンテナにクラスを追加します。しかし、私はmouseenterと別のpまで、クラスを親コンテナに残したいと思います。どうすれば純粋なJavascriptでこれを行うことができますか？

私はmouseoutを使用しようとしましたが、p要素を終了するとすぐにクラスをコンテナから削除します。クラスが追加される前に私はまた以下を試しましたが、私はまだ私が探している効果を得ていません。

container.classList.remove("p" + i + "-transform");

var container = document.querySelector(".container"); 
 
var p = document.querySelectorAll("p"); 
 

 
var enterMouse = function(i) { 
 
    p[i].addEventListener("mouseenter", function() { 
 
    if (i === 0) { 
 
     container.classList.remove("p" + i + "-transform"); // doesn't work 
 
     container.classList.add("p0-transform"); 
 
    } else if (i === 1) { 
 
     container.classList.remove("p" + i + "-transform"); // doesn't work 
 
     container.classList.add("p1-transform"); 
 
    } else if (i === 2) { 
 
     container.classList.remove("p" + i + "-transform"); // doesn't work 
 
     container.classList.add("p2-transform"); 
 
    } else if (i === 3) { 
 
     container.classList.remove("p" + i + "-transform"); // doesn't work 
 
     container.classList.add("p3-transform"); 
 
    } 
 
    }); 
 
} 
 

 
for (i = 0; i < p.length; i++) { 
 
    enterMouse(i); 
 
}

.p0-transform { 
 
    background-color: red; 
 
} 
 

 
.p1-transform { 
 
    background-color: green; 
 
} 
 

 
.p2-transform { 
 
    background-color: orange; 
 
} 
 

 
.p3-transform { 
 
    background-color: blue; 
 
}

<div class="container"> 
 
    <p>1</p> 
 
    <p>2</p> 
 
    <p>3</p> 
 
    <p>4</p> 
 
</div>

Answer 1

あなたは、彼らが要素上に存在しない場合でも、classList.remove()で複数のクラスを削除し、これだけ.remove()にそれらのすべてを渡すことによって、それらをすべて削除することができます。

iは、.add()を実行しているときにクラスに連結することができるので、その冗長コードを取り除くこともできます。

var container = document.querySelector(".container"); 
 
var p = document.querySelectorAll("p"); 
 
var classes = [].map.call(p, function(_, i) { return "p" + i + "-transform" }) 
 

 
function enterMouse(i) { 
 
    p[i].addEventListener("mouseenter", function() { 
 
    container.classList.remove.apply(container.classList, classes); 
 
    container.classList.add("p" + i + "-transform"); 
 
    }); 
 
} 
 

 
for (var i = 0; i < p.length; i++) { 
 
    enterMouse(i); 
 
}

.p0-transform { 
 
    background-color: red; 
 
} 
 

 
.p1-transform { 
 
    background-color: green; 
 
} 
 

 
.p2-transform { 
 
    background-color: orange; 
 
} 
 

 
.p3-transform { 
 
    background-color: blue; 
 
}

<div class="container"> 
 
    <p>1</p> 
 
    <p>2</p> 
 
    <p>3</p> 
 
    <p>4</p> 
 
</div>

container上の任意の他のクラスがあることはありません場合は、単にcontainer.className = ""

---

で.classNameプロパティをクリアすることができますここで私はコードを書くと思います方法です現代的な機能とわずかな微調整があります：

const container = document.querySelector(".container"); 
const classes = Array.from(document.querySelectorAll("p"), function(el, i) { 
    const cls = "p" + i + "-transform"; 

    el.addEventListener("mouseenter", function() { 
    container.classList.remove(...classes); 
    container.classList.add(cls); 
    }); 

    return cls; 
}); 

Answer 2

あなたは完全に空の文字列にそのclassNameプロパティを設定することにより、要素のCSSクラスをダンプすることができます。

var container = document.querySelector(".container"); 
 
var p = document.querySelectorAll("p"); 
 

 
var enterMouse = function(i) { 
 
    p[i].addEventListener("mouseenter", function() { 
 
    if (i === 0) { 
 
     container.className = ""; // works now 
 
     container.classList.add("p0-transform"); 
 
    } else if (i === 1) { 
 
     container.className = ""; // works now 
 
     container.classList.add("p1-transform"); 
 
    } else if (i === 2) { 
 
     container.className = ""; // works now 
 
     container.classList.add("p2-transform"); 
 
    } else if (i === 3) { 
 
     container.className = ""; // works now 
 
     container.classList.add("p3-transform"); 
 
    } 
 
    }); 
 
} 
 

 
for (i = 0; i < p.length; i++) { 
 
    enterMouse(i); 
 
}

.p0-transform { 
 
    background-color: red; 
 
} 
 

 
.p1-transform { 
 
    background-color: green; 
 
} 
 

 
.p2-transform { 
 
    background-color: orange; 
 
} 
 

 
.p3-transform { 
 
    background-color: blue; 
 
}

<div class="container"> 
 
    <p>1</p> 
 
    <p>2</p> 
 
    <p>3</p> 
 
    <p>4</p> 
 
</div>