Question

当我点击超链接<a>时，它会打开紧随其后的<div>内容。现在我正在向<a>和<div>添加ID以定位它们。但是我如何提高效率呢？我的想法是使用一个脚本来搜索下一个<div>。这样可以避免声明ID。

＆＃13;

function open_content(y) {
    x=y.substr(-3,3)
    console.log(x);
    if (document.getElementById('content'+x).style.display=='none'){
        document.getElementById('click'+x).innerHTML="CLOSE";
        document.getElementById('content'+x).style.display='block';
    } else {
        document.getElementById('click'+x).innerHTML="SHOW";
        document.getElementById('content'+x).style.display='none';
    }
}

＆＃13;

a {
    cursor: pointer;
}

＆＃13;

<h2>CONTENT TITLE</h2>
<p><a id="click100" onClick="open_content(this.id)">SHOW</a></p>
<div id="content100" class="content" style="display:none;">
    <div> 
        <h3>Sub Title</h3>
        <p><a id="click101" onClick="open_content(this.id)">SHOW</a></p>
        <div id="content101" style="display:none;">
            <p>Place content here</p>
        </div>
    </div>
</div>

＆＃13;

Answer 1

在 HTML

中

<p><a id="click100" onClick="open_content(this.id)">SHOW</a></p>
<div id="content100" class="content" style="display:none;">
    ...
</div>

链接<a id="click100" ...> <{strong> <p>内的，因此需要首先 parentElement 。然后 nextElementSibling ：

var link = document.getElementById("click100"); var parentThenNext = link.parentElement.nextElementSibling;

因此，您可以访问<div id="content100">...</div>。

Example

Answer 2

function open_content(el) {
    // get a reference to the content div for the clicked "el"
    // parentNode used twice because of the <p> wrapping the <a>
    var targetDiv = el.parentNode.parentNode.getElementsByTagName("div")[0];
    if (targetDiv.style.display=='none'){
        el.innerHTML="CLOSE";
        targetDiv.style.display='block';
    } else {
        el.innerHTML="SHOW";
        targetDiv.style.display='none';
    }
}

然后用

打电话

<p><a onClick="open_content(this);">SHOW</a></p>

是的，您可以删除所有ID。

Answer 3

您可以使用jquery parent（）和siblings（）方法。这是plunker

<!DOCTYPE html>
<html>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<body>

<h2>CONTENT TITLE</h2>
<p><a  >SHOW</a></p>
<div  class="content" style="display:none;">
    <div> 
        <h3>Sub Title</h3>
        <p><a>SHOW</a></p>
        <div  style="display:none;">
            <p>Place content here</p>
        </div>
    </div>
</div>

<script>
    $("a").click(function(){
      console.log($(this).parent().siblings("div"))
      $(this).parent().siblings("div").toggle();
    })
</script>

</body>
</html

＆GT;

Answer 4

我尝试将this传递给open_content()而不是this.id。拥有它我将能够获得链接的parentNode - <p> - 然后从那里获得.nextElementSibling的下一个元素。像这样：

function open_content(toggleElement) {
    var contentElement = toggleElement.nextElementSibling;

    if (contentElement.style.display == 'none') {
        toggleElement.innerHTML = "CLOSE";
        contentElement.style.display = 'block';
    } else {
        toggleElement.innerHTML = "SHOW";
        contentElement.style.display = 'none';
    }
}

以下是更新的HTML：

<h2>CONTENT TITLE</h2>
<p><a id="click100" onClick="open_content(this)">SHOW</a></p>
<div id="content100" class="content" style="display:none;">
    <div> 
        <h3>Sub Title</h3>
        <p><a id="click101" onClick="open_content(this)">SHOW</a></p>
        <div id="content101" style="display:none;">
            <p>Place content here</p>
        </div>
    </div>
</div>

祝你好运！ 8 - ）

Answer 5

查看您的HTML结构，您必须获取锚标记的父级的引用，在这种情况下为<p>，然后对其执行下一个兄弟调用。

document.getElementById("anchor_id").parentNode.nextElementSibling;

如何定位下一个<div>元素？

5 个答案: