Question

我可以制作一个通用函数，它只会影响相对于点击链接的class =“hiddenDiv”的div的下一次发生吗？

像这样：

<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相对于链接的第一次出现。

我希望这是可以理解的。

Answer 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中有大量链接我建议使用this var。您应该执行以下操作

<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>

Answer 2

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

Answer 3

此代码也发布于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>

Javascript：获取div元素的下一个出现

3 个答案: