個々のユーザーのJavascriptドロップダウンを作成する

Question

次のコードは動作しますが、最初の行についてのみ動作します。 3番目のボタンをクリックしても、トップボタンの情報と位置が参照されます。個々のユーザーに基づいてドロップダウンを行うべきことをJavascriptに伝えるにはどうすればよいですか？ （この例ではそのIDによって識別される3人のユーザーがある：2160、3550、および5520）

function myFunction() { 
 
    document.getElementById("myDropdown").classList.toggle("show"); 
 
} 
 

 
window.onclick = function(event) { 
 
    if (!event.target.matches('.dropbtn')) { 
 

 
    var dropdowns = document.getElementsByClassName("dropdown-content"); 
 
    var i; 
 
    for (i = 0; i < dropdowns.length; i++) { 
 
     var openDropdown = dropdowns[i]; 
 
     if (openDropdown.classList.contains('show')) { 
 
     openDropdown.classList.remove('show'); 
 
     } 
 
    } 
 
    } 
 
}

.dropbtn { 
 
    background-color: #4CAF50; 
 
    color: white; 
 
    padding: 16px; 
 
    font-size: 16px; 
 
    border: none; 
 
    cursor: pointer; 
 
} 
 
.dropbtn:hover, .dropbtn:focus { 
 
    background-color: #3e8e41; 
 
} 
 
.dropdown { 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 
.dropdown-content { 
 
    display: none; 
 
    position: absolute; 
 
    background-color: #f9f9f9; 
 
    min-width: 160px; 
 
    overflow: auto; 
 
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
 
    z-index: 1; 
 
} 
 
.dropdown-content a { 
 
    color: black; 
 
    padding: 12px 16px; 
 
    text-decoration: none; 
 
    display: block; 
 
} 
 
.dropdown a:hover { 
 
    background-color: #f1f1f1 
 
} 
 
.show { 
 
    display:block; 
 
}

<p>Click on the button to open the dropdown menu.</p> 
 

 
<p> 
 
<div class="dropdown"> 
 
<button onclick="myFunction()" class="dropbtn">Dropdown</button> 
 
    <div id="myDropdown" class="dropdown-content"> 
 
    <a href="1-2160.html">1</a> 
 
    <a href="2-2160.html">2</a> 
 
    <a href="3-2160.html">3</a> 
 
    </div> 
 
</div> 
 
</p> 
 

 
<p> 
 
<div class="dropdown"> 
 
<button onclick="myFunction()" class="dropbtn">Dropdown</button> 
 
    <div id="myDropdown" class="dropdown-content"> 
 
    <a href="1-3550.html">1</a> 
 
    <a href="2-3550.html">2</a> 
 
    <a href="3-3550.html">3</a> 
 
    </div> 
 
</div> 
 
</p> 
 

 
<p> 
 
<div class="dropdown"> 
 
<button onclick="myFunction()" class="dropbtn">Dropdown</button> 
 
    <div id="myDropdown" class="dropdown-content"> 
 
    <a href="1-5520.html">1</a> 
 
    <a href="2-5520.html">2</a> 
 
    <a href="3-5520.html">3</a> 
 
    </div> 
 
</div> 
 
</p>

がうまくいけば、これは理にかなっています。

Answer 1

、あなたはdiv要素の一意のIDを持っている必要があります。 myDropDown1、myDropDown2、およびmyDropDown3のような単純なものが動作します。

function myFunction(id) { 
    document.getElementById(id).classList.toggle("show"); 
} 

し、HTMLは、次のようになります。：あなたは、同様にこのような何かをmyFuncitonを変更する必要があります一意である必要があり、文書内

<p>Click on the button to open the dropdown menu.</p> 

    <p> 
    <div class="dropdown"> 
     <button onclick="myFunction('myDropdown1')" class="dropbtn">Dropdown</button> 
     <div id="myDropdown1" class="dropdown-content"> 
     <a href="1-2160.html">1</a> 
     <a href="2-2160.html">2</a> 
     <a href="3-2160.html">3</a> 
     </div> 
    </div> 
    </p> 

    <p> 
    <div class="dropdown"> 
    <button onclick="myFunction('myDropdown2')" class="dropbtn">Dropdown</button> 
    <div id="myDropdown2" class="dropdown-content"> 
    <a href="1-3550.html">1</a> 
    <a href="2-3550.html">2</a> 
    <a href="3-3550.html">3</a> 
    </div> 
</div> 
</p> 

<p> 
<div class="dropdown"> 
<button onclick="myFunction('myDropdown3')" class="dropbtn">Dropdown</button> 
    <div id="myDropdown3" class="dropdown-content"> 
    <a href="1-5520.html">1</a> 
    <a href="2-5520.html">2</a> 
    <a href="3-5520.html">3</a> 
    </div> 
</div> 
</p> 

Answer 2

idの要素を複数持つことはできません。これを行うと、文書に最初に見つかったものだけがgetElementById()によって返されます。したがって、clickハンドラー：

function myFunction() { 
    document.getElementById("myDropdown").classList.toggle("show"); 
} 

常に最初のボタンを参照します。

しかし、この問題を解決するためにidを使用する必要はありません。

本当に、あなたはこれをやりすぎです。

div要素を囲む要素が<p>である必要はありません。それらは意味的に間違っています。余分な垂直スペースが必要な場合は、margin-bottomをdiv要素のそれぞれに追加してください。

ここでは、イベントハンドリングをインラインHTMLで設定し、window.onclickで設定しました。どちらも使用しないでください。各ボタン上でクリックイベントハンドラを設定し、各ボタンがクリックされると、その次の要素の可視性を切り替えることができます。それがあなたの問題を解決します。

最後に、リストを作っているので、意味的に正しいようにリストを作成するときにリスト要素を使用するので、ここでもulとli要素を使用する必要があります。

非常に簡素化され、コードを作業することはこれです：コメントで述べたように

function myFunction() { 
 
    this.nextElementSibling.classList.toggle("show"); 
 
} 
 

 
// Get all the buttons as an array 
 
var btns = Array.prototype.slice.call(document.querySelectorAll(".dropbtn")); 
 

 
// Loop through the array and assign click event handlers 
 
btns.forEach(function(btn){ 
 
    btn.addEventListener("click", myFunction); 
 
});

ul { 
 
    list-style:none; 
 
    margin:0; 
 
    padding:0; 
 
} 
 

 
li { 
 
    display:inline-block; 
 
} 
 

 
.dropbtn { 
 
    background-color: #4CAF50; 
 
    color: white; 
 
    padding: 16px; 
 
    font-size: 16px; 
 
    border: none; 
 
    cursor: pointer; 
 
} 
 
.dropbtn:hover, .dropbtn:focus { 
 
    background-color: #3e8e41; 
 
} 
 
.dropdown { 
 
    margin-bottom:1em; 
 
} 
 
.dropdown-content { 
 
    display: none; 
 
    position: absolute; 
 
    background-color: #f9f9f9; 
 
    min-width: 160px; 
 
    overflow: auto; 
 
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
 
    z-index: 1; 
 
} 
 
.dropdown-content a { 
 
    color: black; 
 
    padding: 12px 16px; 
 
    text-decoration: none; 
 
    display: block; 
 
} 
 
.dropdown a:hover { 
 
    background-color: #f1f1f1 
 
} 
 
.show { 
 
    display:block; 
 
}

<p>Click on the button to open the dropdown menu.</p> 
 

 
<div class="dropdown"> 
 
    <button class="dropbtn">Dropdown</button> 
 
    <ul class="dropdown-content"> 
 
    <li><a href="1-2160.html">1</a></li> 
 
    <li><a href="2-2160.html">2</a></li> 
 
    <li><a href="3-2160.html">3</a></li> 
 
    </ul> 
 
</div> 
 

 
<div class="dropdown"> 
 
    <button class="dropbtn">Dropdown</button> 
 
    <ul class="dropdown-content"> 
 
    <li><a href="1-3550.html">1</a></li> 
 
    <li><a href="2-3550.html">2</a></li> 
 
    <li><a href="3-3550.html">3</a></li> 
 
    </ul> 
 
</div> 
 

 
<div class="dropdown"> 
 
    <button class="dropbtn">Dropdown</button> 
 
    <ul class="dropdown-content"> 
 
    <li><a href="1-5520.html">1</a></li> 
 
    <li><a href="2-5520.html">2</a></li> 
 
    <li><a href="3-5520.html">3</a></li> 
 
    </ul> 
 
</div>