1

我可以创建一个通用函数，该函数只会影响 div 的下一次出现，其中 class="hiddenDiv" 相对于单击的链接？

像这样：

<p><a href="#" class="showDivLink">click to show/hide div</a></p>
    <div class="hiddenDiv">
        <p>Text within hidden div.</p>
    </div>

我希望能够编写这个，以便我可以在我希望能够显示/隐藏的任何带有 class="hiddenDiv" 的 div 之前插入一个带有 class="showDivLink" 的链接。链接应该只影响 div 相对于链接的第一次出现。

我希望这是可以理解的。

4

3 回答 3

1

我建议使用getElementById方法。添加 id 属性div并处理onClick事件。

<script type="javascript">
    function onAClicked() {
        var div = document.getElementById("hiddenDivId");
        //do whatever you want to div.
    }
</script>
....
<p><a href="#" class="showDivLink" onClick="onAClicked">click to show/hide div</a></p>
<div class="hiddenDiv" id="hiddenDivId">
    <p>Text within hidden div.</p>
</div>

UPD：如果可以有大量与 div 的链接，我建议使用thisvar。您应该执行以下操作

<script type="javascript">
    function onAClicked(id) {
        var div = document.getElementById("hiddenDivId" + id);
        //do whatever you want to div.
    }
</script>
....
<p><a href="#" class="showDivLink" id="1" onClick="onAClicked(this.id)">click to show/hide div</a></p>
<div class="hiddenDiv" id="hiddenDivId1">
    <p>Text within hidden div.</p>
</div> 
<p><a href="#" class="showDivLink" id="N" onClick="onAClicked(this.id)">click to show/hide div</a></p>
....
<div class="hiddenDiv" id="hiddenDivIdN">
    <p>Text within hidden div.</p>
</div>

UPD2：甚至更多，您可以使用window.event

<script type="javascript">
    function onAClicked() {
        var e = window.event,
            obj = e.target || e.srcElement,
            id = e.id,
            div = document.getElementById("hiddenDivId" + id);
        //do whatever you want to div.
    }
</script>
于 2012-11-07T09:42:30.117 回答
0

此代码还发布在http://scottizu.wordpress.com/2013/09/24/using-javascript-to-show-and-hide-div-elements/上。

<html>
<head>
<script>
    function myShow(node) {
    node.innerHTML = node.innerHTML + "_SIB1_" + node.nextSibling.nodeName; // Text
    node.innerHTML = node.innerHTML + "_SIB2_" + node.nextSibling.nextSibling.nodeName; // Div
    node.innerHTML = node.innerHTML + "_SIB2_ID_" + node.nextSibling.nextSibling.id; // myDiv
    node.innerHTML = node.innerHTML + "_SIB2_VISIBILITY_" + node.nextSibling.nextSibling.style.visibility;
    node.nextSibling.nextSibling.style.visibility = 'visible';
}

function myHide(node) {
    node.innerHTML = node.innerHTML + '_P_' + node.parentNode.nodeName; // Div      node.innerHTML = node.innerHTML + '_P_ID_' + node.parentNode.id; // myDiv
    node.innerHTML = node.innerHTML + "_P_VISIBILITY_" + node.parentNode.style.visibility;
    node.parentNode.style.visibility = 'hidden';
}
</script>
</head>
<body>
<a title='myShowLink' onclick='myShow(this)'>Click to Show Div</a>
<div id='myDiv'>
    <a title='myHideLink' onclick='myHide(this)'>Click to Hide Div</a> 
    More Info
</div>
</body>
</html>
于 2013-09-24T19:34:57.707 回答
0

您可以使用$('.hiddenDiv').before(<your html code>). 尝试使用这个。

于 2012-11-07T09:43:33.507 回答