我正在编写一些函数来通过使用setAttribute应用名为“hidden”和“visible”的样式类来显示和隐藏页面上的各种div。此功能旨在一次隐藏多个div。给予“隐藏”类的每个div的ID列在数组中。
每个div可能有多个类,所以当div被赋予“隐藏”类时,除了被替换的“可见”类外,必须保留其他类。
function hideSections() {
// Initialise array with div IDs
var divs = new Array("tab-1", "tab-2", "tab-3", "tab-4", "tab-5");
// Loop through divs in array
for (var count = 0; count < divs.length; count++) {
// Get existing classes
var div = document.getElementById(divs[count]);
var divClass = div.getAttribute("class");
// Remove "visible" class if it exists
divClass = divClass.replace("visible", "");
// Append "hidden" class
div.setAttribute("class", divClass + " hidden");
}
}
由于某种原因,这个功能无法正常工作,但肯定会被调用。
如果放在行[[var divClass = div.getAttribute(“class”);]]之前,则会出现放置在循环内的alert()。放在这一行之后,它没有,所以我猜这条线就是问题所在。
所有div都指定了一个class属性。
答案 0 :(得分:0)
我的猜测是你有没有类属性的元素,因此divClass
为空 - 导致行divClass = divClass.replace("visible", "");
出错。 (无法调用空值的方法)
尝试检查属性:
// Initialise array with div IDs
var divs = new Array("tab-1", "tab-2", "tab-3", "tab-4", "tab-5");
// Loop through divs in array
for (var count = 0; count < divs.length; count++) {
// Get existing classes
var div = document.getElementById(divs[count]);
var divClass = '';
if(divClass = div.getAttribute("class")) {
// Remove "visible" class if it exists
divClass = divClass.replace("visible", "");
}
// Append "hidden" class
div.setAttribute("class", divClass + " hidden");
}
...或者您可以查看the JSFiddle demo I created。
答案 1 :(得分:0)
您需要的是用于添加和删除类的实用程序函数。这是我使用的一些:
var trim = function(s) {
return s.replace(/(^\s+)|(\s+$)/g,'').replace(/\s+/g,' ');
}
var hasClassName = function(el, cName) {
if (typeof el == 'string') el = document.getElementById(el);
var re = new RegExp('(^|\\s+)' + cName + '(\\s+|$)');
return el && re.test(el.className);
}
var addClassName = function(el, cName) {
if (typeof el == 'string') el = document.getElementById(el);
if (!hasClassName(el, cName)) {
el.className = trim(el.className + ' ' + cName);
}
}
var removeClassName = function(el, cName) {
if (typeof el == 'string') el = document.getElementById(el);
if (hasClassName(el, cName)) {
var re = new RegExp('(^|\\s+)' + cName + '(\\s+|$)','g');
el.className = trim(el.className.replace(re, ''));
}
}
现在你可以做到:
addClass(elementOrId, 'classValue');
包装“命名空间”或任何适合的。
答案 2 :(得分:0)
尝试这样的事情:
function hideSections() {
// Initialise array with div IDs
var divs = ["tab-1", "tab-2", "tab-3", "tab-4", "tab-5"];
// Loop through divs in array
for (var count = 0; count < divs.length; count++) {
// Get existing classes
var div = document.getElementById(divs[count]);
var divClass = div.getAttribute("class");
// Remove "visible" class if it exists
var regex = new RegExp( '(?:^|\\s+)' + 'visible' + '(?=\\s|$)', 'i' );
if ( regex.test( divClass ) ) {
divClass = divClass.replace( regex, '' ).replace( /^\s+/, '' );
// Append "hidden" class
if ( divClass )
div.setAttribute( 'class', divClass + ' hidden' );
else
div.setAttribute( 'class', 'hidden' );
}
}
}
您也可以在jsfiddle
中试用