通過單擊li更改某些div的顯示

我有一個選單，我有一些 div，我想將我的 div 的顯示更改為 none，除了與單擊的選單項相關的 div。我寫了一些代碼，但它沒有用，并將我的所有 div 顯示更改為 none 這是我的代碼

var myValue, number, newArray;
var myArray = [1, 2, 3, 4, 5, 6];

$(".BreakfastLi").click(function() {
  myValue = 1;
})

$(".LunchLi").click(function() {
  myValue = 2;
})

$(".DinnerLi").click(function() {
  myValue = 3;
})

$(".DesertLi").click(function() {
  myValue = 4;
})

$(".SoupLi").click(function() {
  myValue = 5;
})

$(".DrinkLi").click(function() {
  myValue = 6;
})
for (var i = 0; i < 6; i  ) {

  newArray = myArray.filter(num => num !== myValue);
  number = newArray[i];

  $(".group"   number).addClass("d-none");

}

.d-none {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<ul class="foodMenu">
  <li class="BreakfastLi">Breakfast</li>
  <li class="LunchLi">Lunch</li>
  <li class="DinnerLi">Dinner</li>
  <li class="DesertLi">Desert</li>
  <li class="SoupLi">Soups</li>
  <li class="DrinkLi">Drinks</li>
</ul>



<div class="group1">some content</div>
<div class="group2">some content</div>
<div class="group3">some content</div>
<div class="group4">some content</div>
<div class="group5">some content</div>
<div class="group6">some content</div>

uj5u.com熱心網友回復：

您將希望顯示/隱藏代碼在每次單擊時運行。你真的不需要myValue或根本不需要myArray。

function showGroup(i) {
  $(".group").addClass("d-none");  // hide all groups
  $("#group"   i).removeClass("d-none");  // show selected group
}

$(".BreakfastLi").click(function() {
  showGroup(1);
})

$(".LunchLi").click(function() {
  showGroup(2);
})

$(".DinnerLi").click(function() {
  showGroup(3);
})

$(".DesertLi").click(function() {
 showGroup(4);
})

$(".SoupLi").click(function() {
  showGroup(5);
})

$(".DrinkLi").click(function() {
  showGroup(6);
});

showGroup(0); // hide everything by default

.d-none {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<ul class="foodMenu">
  <li class="BreakfastLi">Breakfast</li>
  <li class="LunchLi">Lunch</li>
  <li class="DinnerLi">Dinner</li>
  <li class="DesertLi">Desert</li>
  <li class="SoupLi">Soups</li>
  <li class="DrinkLi">Drinks</li>
</ul>
<div class="group" id="group1">some content 1</div>
<div class="group" id="group2">some content 2</div>
<div class="group" id="group3">some content 3</div>
<div class="group" id="group4">some content 4</div>
<div class="group" id="group5">some content 5</div>
<div class="group" id="group6">some content 6</div>

uj5u.com熱心網友回復：

AKX 讓您走上了正確的道路，但課程旨在成為一組類似的東西。讓我們使用一個和元素索引來大大簡化。

• https://api.jquery.com/index
• https://api.jquery.com/eq

function showGroup(i) {
  $(".group").addClass("d-none"); // hide all groups

  if (i !== null) {
    $(".group").eq(i).removeClass("d-none"); // show selected group
  }
}

$(".meal").click(function() {
  showGroup($(this).index());
})

showGroup(); // hide everything by default

.d-none {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<ul class="foodMenu">
  <li class="meal">Breakfast</li>
  <li class="meal">Lunch</li>
  <li class="meal">Dinner</li>
  <li class="meal">Desert</li>
  <li class="meal">Soups</li>
  <li class="meal">Drinks</li>
</ul>

<div class="group">some Breakfast content</div>
<div class="group">some Lunch content</div>
<div class="group">some Dinner content</div>
<div class="group">some Desert content</div>
<div class="group">some Soups content</div>
<div class="group">some Drinks content</div>

標籤：javascript html jQuery css

上一篇：如何在沒有UI連接的情況下直接從后端訪問瀏覽器上的PUT/POST/DELETE端點

下一篇：如何在代碼中找到方法的定義？