0

任意の数のアイテムを含むリストがあります。各アイテムには、実行できるアクションがいくつかあります。これらのアクションを、ユーザーが特定のリスト項目に関連付けられたリンクをクリックしたときに表示される div に表示したいと考えています。

次のコードを試しましたが、リンクをクリックすると、リンクに関連付けられている非表示の div ではなく、最初の非表示の div が表示されます。

<script language="javascript"> 
function toggleOptions() {
        var ele = this;
        var text = this.parentNode.getElementsByClassName("displayOptions");


    if(ele.style.display == "block") {
        ele.style.display = "none";
    text.innerHTML = "TESTING";
    }
    else {
    ele.style.display = "block";
    text.innerHTML = "Hide GPS";
    }
}

ここにHTMLがあります。リストは無限にある可能性がありますが、これはリストの抜粋にすぎません。

     <a href="javascript:toggleOptions();">
        ITEM 1 OPTIONS
     </a>
      <div class="toggleOptions" style="display: none">
        ITEM 1 OPTIONS
     </div>

     <a href="javascript:toggleOptions();">
        ITEM 2 OPTIONS
     </a>
     <div class="toggleOptions" style="display: none">
        ITEM 2 OPTIONS
     </div>

     <a href="javascript:toggleOptions();">
        ITEM 3 OPTIONS
     </a>
      <div class="toggleOptions" style="display: none">
        ITEM 2 OPTIONS
     </div>
4

2 に答える 2

0

各グループの周りに別のdivなどを配置します。...toggleOptions（）関数をonclickに配置し、空にならないようにhref a＃を渡します... toggleOptions（this）を渡して、クリックされた要素を確認します。

<div>
    <a href="#" onclick="toggleOptions(this);" style="display:block;">
        SHOW
     </a>
      <div class="toggleOptions" style="display: none">
        ITEM 1 OPTIONS
     </div>
</div>
<div>
    <a href="#" onclick="toggleOptions(this);" style="display:block;">
        SHOW
     </a>
      <div class="toggleOptions" style="display: none">
        ITEM 2 OPTIONS
     </div>
</div>
<div>
    <a href="#" onclick="toggleOptions(this);" style="display:block;">
        SHOW
     </a>
      <div class="toggleOptions" style="display: none">
        ITEM 3 OPTIONS
     </div>
</div>​

ここでこれを試してくださいhttp://jsfiddle.net/YE6XZ/1/

function toggleOptions(e) {
    var ele = e;
    var text = e.parentElement.querySelector('.toggleOptions')

if(text.style.display == "none") {
    //ele.style.display = "none";
    text.style.display = "block";
    text.innerHTML = "TESTING";
    ele.innerHTML = "hide";
}
else {
    text.style.display = "none";
    //text.innerHTML = "Hide GPS";
    ele.innerHTML = "show";
}

return false;

}

于 2012-12-05T19:51:21.813 に答える
0

.toggleOptionsは有効なidDOM 属性値ではありません。className で要素を取得しようとしていますか? 次にgetElementsByClassName、代わりに使用するか、リテラルの先頭のドットを削除する必要があります。

于 2012-12-05T19:41:32.620 に答える