如何在onclick后更改课程

我正在创建一个用于点击剧本文本的剧本标记脚本，文本将根据分配给它的类而变为空白或更改字体颜色。我更喜欢Javascript的菜鸟。如何在onclick后更改课程

我的脚本只有当它是空白时单击被欺骗的文本时才起作用 - 所以当我已经点击它时，我无法重新将它改回来。

这里是工作的代码：

// Hide Spoiler Individually 
var singleHidden = document.getElementsByClassName("hidden"); 

var hideMe = function() { 
    var attribute = this.getAttribute("hidden"); 
    this.className = "show"; 
}; 

for (var i = 0; i < singleHidden.length; i++) { 
    singleHidden[i].addEventListener("click", hideMe, false) 
};

这里有一个的jsfiddle链接。 https://jsfiddle.net/o94c00hb/

来源

2015-06-30 sinfruit

我建议你使用jQuery，它有类'addClass'，'removeClass'和'toggleClass'这真的很方便 – depperm

我建议不要使用jQuery，除非你需要它更多因为或者它填补了一些其他的依赖。如果您只需添加或删除类，那么现代浏览器的JavaScript [本地支持]（https://developer.mozilla.org/en-US/docs/Web/API/Element/classList），其功能类似于' classList.add（）'，'classList.remove（）'和'classList.toggle（）'。 –

试试这个：

var hideMe = function() { 

    if(this.className == "hidden") 
     this.className = "show" 
    else 
     this.className = "hidden" 
};

来源

2015-06-30 21:46:33 Michael

它的工作原理！请问，“这个”是如何工作的？我发现它在JS中使用令人困惑。 – sinfruit

这是一个简单的if/else条件来切换'className'。正如其他人在其他答案中发布的一样;使用像JQuery这样的库更好，而不是写入原始JS。 JQuery将处理使用原始JS时经常出现的所有跨浏览器不兼容问题。 – Michael

如果你不反对使用jquery我会做这样的事情：

$('.hidden').on('click', function(){ 
    $(this).toggleClass('show'); 
});

JSFIDDLE

来源

2015-06-30 21:49:11 40Alpha

如何在onclick后更改课程

回答

相关问题