编辑2a：使用xpath

Question

首先，如果我的查询的答案显示在别处，或者我的下面的解释缺乏任何清晰/正确的术语，我表示歉意。我搜索过，但是我的知识 - 而且我使用了知识这个词，相当自由！ - JS是这样的，我无法整理答案并解决我的问题。

我在html的主体中多次出现'MoreInfo'作为div id，但是我知道，因为我使用了.getElementById，Id需要是唯一的，并且只有第一次出现才会被点击。我相信更改为.getElementsByClassName可能是一个解决方案，使我能够多次出现一个类名反对被限制为.getElementById的一个实例，但我不确定如何修改下面的让它工作，我的尝试已经持平。

我正在寻找一个不使用Jquery的解决方案，或者不需要添加额外的ID，因为我在下面添加了一个“2”，因为我需要做大量的次数和次数尚未确定。

非常感谢帮助。

function showMore(el) {
el.style.display == "none";
document.getElementById('MoreInfo').style.display = '';
return false;
}

function showMore2(el) {
el.style.display == "none";
document.getElementById('MoreInfo2').style.display = '';
return false;
}

Answer 1

您可以使用getElementsByClassName("MoreInfo")并在获得后重复列表。

使用多个ID是一个坏主意，因为ID是唯一的，不应按惯例多次使用。如果您希望多次使用属性，那么无论如何都应该使用类。

function showMore(el) {
    el.style.display == "none";
    var elements = document.getElementsByClassName("MoreInfo");
    for (i = 0; i < elements.length; i++) {
        elements[i].style.display = '';
    }
    return false;
}

getElementsByClassName将返回DOM中具有该类名的所有元素的列表。你应该遍历那个列表，在for循环中对所有这些做一些事情。

修改

根据从评论中获得的进一步信息，我认为最好的答案是使用类名而不是之前建议的ID。但另外，您似乎想要找到给定链接的关联子项。

由于您在JSFiddle中概述的结构，这可以相对容易地完成，但您将需要考虑您可能最终做的任何其他嵌套。

<强> HTML

<div> <span class="details"><a href="#" onClick="showMore(this)">Click For More Info</a></span> <div class="MoreInfo" style="display:none;"><strong>More Info Shown Here</strong> </div> <div> <span class="details"><a href="#" onClick="showMore(this)">Click For More Info Again</a></span> <div class="MoreInfo" style="display:none;"><strong>Different Information Shown Here</strong> </div>

<强>的Javascript

function showMore(el) { el.style.display = "none"; el.parentNode.parentNode.getElementsByClassName("MoreInfo")[0].style.display = 'block'; return false; }

javascript函数获取当前元素，隐藏它（你有一个额外的=，我认为这是为了隐藏原始链接。

然后我们采取该元素的祖父母。父级是span，span的父级是div。如果我们在父div上执行getElementsByClassName("MoreInfo")，那么将只有一个项目，这将是您想要的项目。因此，我们在索引[0]引用该项并设置其显示属性。

这适用于具有相同结构的所有后续链接：

<div> <span> <a link> </span> <div class="MoreInfo"></div> </div>

JSFiddle查看示例。

Answer 2

“ID”必须是唯一的，因为它“getElementById”是单数（Element），而不是像getElementsByTagName或getElementsByClassName（Elements）这样的复数。

但您可以使用getElementsByTagName，getElementsByClassName，xpath或其他方法来查找特定的DOM节点。

https://developer.mozilla.org/en/docs/Introduction_to_using_XPath_in_JavaScript

编辑2a：使用xpath

很明显，如果你为每个块使用一个类，最容易使用getElementsByClassName。但是使用xpath，您可以更有力地搜索文档以获得更复杂的模式（带有“foo”类的div标签和以“bar”开头的id）。

示例：http://jsfiddle.net/OscarGarcia/a8jqm636/1/

HTML code：

<ul>
    <li><a href="information1" onclick="return showMore(this)">
        Show information #1</a></li>
    <li><a href="information2" onclick="return showMore(this)">
        Show information #2</a></li>
    <li><a href="information3" onclick="return showMore(this)">
        Show information #3</a></li>
</ul>
<div id="information1" class="information">This is information text #1: This is interesting!<br /><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/0/0f/Icon-OK.jpg/35px-Icon-OK.jpg" alt="OK"/></div>
<div id="information2" class="information">This is information text #2: What happened? Wow!<br /><img src="http://upload.wikimedia.org/wikipedia/commons/d/d5/Face-angel.svg" alt="angel" /></div>
<div id="information3" class="information">This is information text #3: Be happy with CSS!<br /><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/9/92/Gnome-face-smile-big.svg/92px-Gnome-face-smile-big.svg.png" alt="happy" /></div>

CSS代码：

.information {
    display: none;
}

JavaScript代码：

function showMore(el) {
    var nodes = document.evaluate('//div[@class="information"]', document, null, XPathResult.ANY_TYPE, null);
    var result = nodes.iterateNext();
    var target = el.getAttribute("href");
    while (result) {
        if (result.getAttribute("id") == target) {
            result.style.display = 'block';
        } else {
            result.style.display = 'none';
        }
        result = nodes.iterateNext();
    }
    return false;
}

此代码将查找每个带有“信息”类的div标签，并将其“id”与点击链接的“href”属性的内容进行比较。

希望它有所帮助。

编辑2b：显示/隐藏没有javascript的信息块

可能你根本不需要使用javascript！这是一个没有javascript的例子：

http://jsfiddle.net/OscarGarcia/431nhjbb/

HTML code：

<ul>
    <li><a href="#information1">Show information #1</a></li>
    <li><a href="#information2">Show information #2</a></li>
    <li><a href="#information3">Show information #3</a></li>
</ul>
<div id="information1" class="information">
    This is information text #1: This is interesting!<br />
    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/0/0f/Icon-OK.jpg/35px-Icon-OK.jpg" alt="OK"/>
</div>
<div id="information2" class="information">
    This is information text #2: What happened? Wow!<br />
    <img src="http://upload.wikimedia.org/wikipedia/commons/d/d5/Face-angel.svg" alt="angel" />
</div>
<div id="information3" class="information">
    This is information text #3: Be happy with CSS!<br />
    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/9/92/Gnome-face-smile-big.svg/92px-Gnome-face-smile-big.svg.png" alt="happy" />
</div>

CSS代码：

.information {
    display: none;
}

.information:target {
    display: block;
}

如您所见，所有信息块都隐藏在页面加载中。当您定位每个块时，其CSS选择器将更改为“target”，因此将显示该块，并隐藏其他每个块。当你定位另一个块时，其余的块都会被隐藏，只有被选中才可见。

编辑1：变量赋值错误很少。

在仔细阅读之后，我看到了变量赋值的一点错误：

function showMore(el) {
  el.style.display = "none";
  document.getElementById('MoreInfo').style.display = 'none'; // ¿none? ¿block?
  return false;
}

您不得使用“==”来指定值。

document.getElementById如何修改以允许多次出现

2 个答案:

编辑2a：使用xpath

编辑2b：显示/隐藏没有javascript的信息块

编辑1：变量赋值错误很少。