我的JS不改变类名

My JS does not change class name

本文关键字：改变 JS 我的      更新时间：2023-09-26

我很沮丧。这是我的js和html代码。除了id="logo"之外，js可以很好地与其他元素配合使用。它不改变类名。

HTML: 

<body class="beforepace">
<div id="golden" onmouseover="showdesc('golden-desc','golden');" onmouseout="hidedesc('golden-desc','golden');">
<div id="golden-desc" class="desc">Golden</div>
</div>
<div id="utopia" onmouseover="showdesc('utopia-desc','utopia');" onmouseout="hidedesc('utopia-desc','utopia');">
<div id="utopia-desc" class="desc">Utopia</div>
</div>
<div id="logo" class="default"></div>
</body>

JS: 

// JavaScript Document
var logo=document.getElementById("logo");
function showdesc(a,b){
    logo.className=b;
    document.getElementById(a).classList.add("desc_show");
    document.getElementById(b).classList.add("div-hover");
}
function hidedesc(a,b){
    document.getElementById(a).classList.remove("desc_show");
    document.getElementById(b).classList.remove("div-hover");
    if(b==="golden")document.getElementById("logo").classList.remove("golden");
    else if(b==="utopia")document.getElementById("logo").classList.remove("utopia");
}

请帮助我，非常感谢!

使用this

添加新类
$("#logo").addClass("yourClassName");

要删除现有的类，请使用

 $("#logo").removeClass("yourClassName");

可以查看logo的颜色变化

// JavaScript Document
var logo=document.getElementById("logo");
function showdesc(a,b){ 
    logo.className=b; 
    document.getElementById(a).classList.add("desc_show");
    document.getElementById(b).classList.add("div-hover");
}
function hidedesc(a,b){  
    document.getElementById(a).classList.remove("desc_show");
    document.getElementById(b).classList.remove("div-hover");
    if(b==="golden")document.getElementById("logo").classList.remove("golden");
    else if(b==="utopia")document.getElementById("logo").classList.remove("utopia");
}
#logo{
  padding-top:10px;
  }
.golden{
  color:yellow;
  }
.utopia{
  color:red;
  }
<body class="beforepace">
<div id="golden" onmouseover="showdesc('golden-desc','golden');" onmouseout="hidedesc('golden-desc','golden');">
<div id="golden-desc" class="desc">Golden</div>
</div>
<div id="utopia" onmouseover="showdesc('utopia-desc','utopia');" onmouseout="hidedesc('utopia-desc','utopia');">
<div id="utopia-desc" class="desc">Utopia</div>
</div>
<div id="logo" class="default">logo here</div>
</body>

相关文章：