單擊下拉選單什么都不做

我剛剛開始使用 JS，所以這可能是一個愚蠢的問題。我想做一個下拉選單，如果您選擇一個選項，相關段落將可見。我真的不知道如何開始，所以我創建了汽車功能，使單擊 e38 按鈕時“e38value”段落可見，但是當我單擊它時沒有任何反應，我不知道為什么。如果有人知道這樣做的更好方法并且它不是那么復雜并且初學者可以理解它，如果你能與我分享它我會很高興。

JS：

var e38 = document.querySelectorAll('e38value')

function cars(){
document.querySelectorAll('e38').onclick = function(){
console.log('clicked');
e38.classList.toggle("e38hidden");
}}

CSS：

.e38hidden{
    display: none;
}

HTML：

<script src="onclick.js"></script>
  <nav>
    <menu>
      <menuitem id="kocsid">
        <a>Amilyen kocsid van</a>
        <menu>
               <menuitem id="Audi">
                  <a>Audi</a>
                  <menu>
                     <menuitem ><a>Audi</a></menuitem>
                     <menuitem><a>Audi</a></menuitem>
                     <menuitem><a>Audi</a></menuitem>
                     <menuitem><a>Audi</a></menuitem>
                  </menu>  
               </menuitem>
          <menuitem id="BMW">
          <a>BMW</a>
          <menu>
             <menuitem><a class="e38">750 e38</a></menuitem>
             <menuitem><a>760 e65</a></menuitem>
             <menuitem><a>M3 e46</a></menuitem>
             <menuitem><a>M3 e62</a></menuitem>
          </menu>  
       </menuitem>
              <menuitem id="Dodge">
                <a>Dodge</a>
                <menu>
                 <menuitem onclick=""><a>Dodge</a></menuitem>
                 <menuitem><a>Dodge</a></menuitem>
                 <menuitem><a>Dodge</a></menuitem>
                 <menuitem><a>Dodge</a></menuitem>
                </menu>
              </menuitem>
  </nav>
  <p id="e38value" class="e38hidden">e38 value</p>

uj5u.com熱心網友回復：

可能還有其他更好的方法來完成，但這里是如何修復你的腳本：

function cars() {
  document.querySelectorAll('.e38').forEach(function(e) {
    e.onclick = function(evt) {
      console.log('clicked', evt.target.innerHTML);
      evt.target.classList.toggle("e38hidden");
    }
  })
}

cars();

筆記：

1. 您需要呼叫cars()以實際初始化事件。
2. 選擇器應該是“.e38”，這意味著具有e38該類的所有元素
3. 您需要forEach在 querySelector 回傳一組元素時呼叫（在這種情況下只有一個元素）
4. 單擊事件可用于定位目標（單擊的位置）。

這是一個小提琴：https : //jsfiddle.net/b9728Lmk/1/

這能解決問題嗎？

uj5u.com熱心網友回復：

您可以簡單地定義一個onchange事件，該事件將洗掉先前選擇的專案的可見性并使當前選擇的專案可見。

function selectSection(value) {
    let context = document.getElementById("sections");
    for (let visible of context.querySelectorAll("p.visible")) {
        visible.classList.remove("visible");
    }
    if (context.children[value]) context.children[value].classList.add("visible");
}

#sections > p:not(.visible) {
    display: none;
}

<select id="section-selector" onchange="selectSection(this.value)">
    <option value="">Please Select</option>
    <option value="0">First</option>
    <option value="1">Second</option>
    <option value="2">Third</option>
    <option value="3">Fourth</option>
    <option value="4">Fifth</option>
</select>

<div id="sections">
    <p>section 1</p>
    <p>section 2</p>
    <p>section 3</p>
    <p>section 4</p>
    <p>section 5</p>
</div>

uj5u.com熱心網友回復：

這是jsFiddle的更新版本

var  menuItemToClick = document.querySelectorAll('.e38')


function cars(){
// I use for here because the menuItemToClick is an array that containt all element having class name e38
  for (var i = 0; i < menuItemToClick.length; i  ) {
      menuItemToClick[i].addEventListener('click', function(event) {
          console.log('clicked');
          ParagraphToHide = document.querySelectorAll('#e38value');
          //I use [0] because the ParagraphToHide is an array, as we use an id we are pretty sure that we will select the first element 
          ParagraphToHide[0].classList.toggle("e38hidden");
      });
  }
} 

cars();

標籤：javascript html css 网络

上一篇：如何將影像從影像源轉換為Base64字串？

下一篇：為提交表單添加值