1

クリックされたリンクに関連する class="hiddenDiv" を使用して、div の次の出現にのみ影響するユニバーサル関数を 1 つ作成できますか?

このような：

<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

を使用できます$('.hiddenDiv').before(<your html code>)。これを使ってみてください。

于 2012-11-07T09:43:33.507 に答える
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 に答える