0

我有以下功能用于更改给定 DIV 上的 CSS 显示

function(){

    if(document.getElementById('kitstory').style.display === "none")
        {
            document.getElementById('kitstory').style.display = "block";
        } else{
            document.getElementById('kitstory').style.display = "none";
        }
    }

我在链接中使用 onclick 在需要时调用该函数。

这在我的 ID 为“kitstory”的 DIV 上运行良好，但是有没有办法可以将此功能用于多个 DIV（我将在 1 页上使用不同的 DIV 有几篇文章我希望该功能生效）？我试过将 id 留空，但它没有运行。

4

6 回答 6

1

但是当然！例如：

function toggleSingle(elementId) {
  var el = document.getElementById(elementId);
  if (el.style.display === 'none') {
    el.style.display = 'block';
  }
  else {
    el.style.display = 'none';
  }
}

这个函数可以被另一个函数使用，它与集合一起工作：

function toggleMultiple(elementIds) {
  if (! (elementIds && elementIds[0]) ) {
    // elementIds is not an array, should exit (and warn the developer as well perhaps)
    return;
  }
  for (var i = 0, l = elementIds.length; i < l; ++i) {
    toggleSingle(elementIds[i]);
  }
}

为什么我把它写成两个函数而不是一个？好的，在这种情况下，这可能是一种矫枉过正，但总的来说，我经常将“单个”项目处理分离到一个单独的函数中：它使我的代码更具可读性，并且我的测试更简单。尽管如此，我们仍然可以用这样的方式编写一个无所不能的函数：

function toggleSmart() {
  for (var i = 0, l = arguments.length; i < l; ++i) {
    var el = document.getElementById(arguments[i]);
    if (el.style.display === 'none') {
      el.style.display = 'block';
    }
    else {
      el.style.display = 'none';
    }
    // and another way to do it: more concise, but less readable for some:
    // var display = el.style.display;
    // display = display === 'none' 
    //        ? 'block' 
    //        : 'none';
  }
}
于 2012-08-21T10:34:47.010 回答
1

有多种方法可以实现这一目标。我能想到的最简单的方法是使用getElementsByTagName或getElementsByClassName遍历列表，或者使用像jQuery这样的框架

于 2012-08-21T10:35:01.660 回答
0

您可以使用以下方法之一：

document.getElementsByClassName('some-class');

document.getElementsByTagName('div');

例如：

var elements = document.getElementsByClassName('kitstory');
for(var i = 0, l = elements.length; i < l; i++) {
    elements[i].style.display = (elements[i].style.display == 'none') ? 'block' : 'none';
}

如果类名或标签名不能立即帮助您定位所需的元素，您也可以更改document为其他内容：

var elements = document.getElementById('my-container').getElementsByTagName('div');
于 2012-08-21T10:35:16.147 回答
0

试试这个：

function yourAction() {
    if(this.style.display === "none") {
        ...
    }
}

var i, len;
for(i = 0, len = document.getElementsByTagName("div"); i < len; i++) {
    document.getElementsByTagName("div")[i].onclick = yourAction;
}
于 2012-08-21T10:35:18.160 回答
0

试试这个 

function change(id){

if(document.getElementById(id).style.display === "none")
    {
        document.getElementById(id).style.display = "block";
    } else{
        document.getElementById(id).style.display = "none";
    }
}

然后用 change(divID) 调用函数；

于 2012-08-21T10:36:21.077 回答
0

创建一个命名函数并将 id 作为参数发送给函数：

function Toggle(id){
  var element = document.getElementById(id);
  if (element.style.display === "none") {
    element.style.display = "block";
  } else{
    element.style.display = "none";
  }
}

用法：

Toggle('kitstory');
于 2012-08-21T10:36:21.250 回答