如果具有 ID 的元素具有类 [重复]

Posted 2023-02-22

【中文标题】如果具有 ID 的元素具有类 [重复]

【英文标题】：If element with ID has as class [duplicate]

【发布时间】：2013-05-07 19:24:13

【问题描述】：

我现在拥有的是

function setMenuCurrentTo(variable)

document.getElementById("game_" + variable).style.display = "block";
var elems = document.getElementsByClassName("current_nav");

for (var i=elems.length; i--;) 
elems[i].style.display = "none";
elems[i].className = 'none';

document.getElementById("game_" + variable).className="current_nav";

因此，当我单击具有特定元素（变量）的标签时，它会添加内容并“隐藏”另一个内容。但是有一个错误，当我在同一个按钮上单击两次时，内容消失了，我没有更多的内容了。

所以我尝试了这段代码：

function setMenuCurrentTo(variable)

document.getElementById("game_" + variable).style.display = "block";
if (getElementById("game_" + variable).hasClass("current_nav")) 

else 
var elems = document.getElementsByClassName("current_nav");

for (var i=elems.length; i--;) 
elems[i].style.display = "none";
elems[i].className = 'none';

document.getElementById("game_" + variable).className="current_nav";

if (getElementById("game_" + variable).hasClass("current_nav"))  else 

使代码不起作用，内容出现但没有其他“隐藏”。我的代码有什么问题？谢谢，我是 javascript 的新手，昨天我得到了原始代码的帮助。再次感谢。

编辑：

我得到了正确答案：来自 wroniasty

function setMenuCurrentTo(variable)

document.getElementById("game_" + variable).style.display = "block";
if (jQuery('#game_' + variable).hasClass('current_nav')) 

else 
var elems = document.getElementsByClassName("current_nav");

for (var i=elems.length; i--;) 
elems[i].style.display = "none";
elems[i].className = 'none';

document.getElementById("game_" + variable).className="current_nav";

【问题讨论】：

你能解释一下这段代码应该做什么吗？

@Muhammad Ramahy 是为了让内容出现而其他的消失，比如otservlist.org/ots/1368480 的类型，上面写着描述，MOTD，那种东西。

【参考方案1】：

getElementById 返回一个 DOMNode，DOMNode 中没有 hasClass 方法。

你可能想使用一个库，比如 jQuery：

jQuery('#game_' + variable).hasClass('current_nav')

【讨论】：

或if (getElementById("game_" + variable).className=="current_nav")

@MuhammadRamahy 仅当 current_nav 是元素上的唯一类时才有效

糟糕，我认为这肯定是错误的

除非 IE7 在起作用（我认为 IE8 支持这个），你可以这样做if(... .classList.contains("current_nav"))

jQuery 对于检查一个元素是否有一个类有点过分了。非常非常方便的矫枉过正。

【参考方案2】：

hasClass 是一个 jQuery 函数，不能在纯 Javascript 中工作。您需要匹配元素的 className 属性：

将该行替换为：

if (getElementById("game_" + variable).className.match(/\bcurrent_nav\b/))  else 

这将匹配元素，即使它包含多个类名。

更多详情请见"hasClass" with javascript?。

【讨论】：

\bfoo\b 匹配 foo-bar

这个对我不起作用：S

【参考方案3】：

使用 DOM 元素的 .classList property。

getElementById("game_" + variable).classList.contains("current_nav")

补丁适用于旧版浏览器（如果您希望在原型上使用，通常不是 IE6/7）。

【讨论】：

对我不起作用：S 但谢谢：D

@LohnClaidon：嗯...除非您使用的是旧浏览器，否则这没有任何意义。

【参考方案4】：

本机 DOM 对象上没有 hasClass 方法。你可以使用classList:

elem.classList.add('foo')
elem.classList.contains('foo')

或者分手className：

elem.className.split(/\s+/).indexOf('foo') !== -1

classList 在 IE 9 及更低版本中不受支持，但如果你真的需要它，你可以得到一个 shim。用一个正则表达式拆分className 没有一个也可以正常工作。

另外，我会考虑尝试 jQuery。你可以简化你的代码：

function setMenuCurrentTo(name) 
    $('.current_nav').hide();
    $('#game_' + name).show().addClass('current_nav');