changing display of some divs by clicking on li-CodePudding

i have a menu i have some divs and i want change the display of my divs to none execpt the div which is related to the menu item that is clicked. i wrote some codes but it didnt work and changed all of my divs display to none here is my codes

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 >
  <li >Breakfast</li>
  <li >Lunch</li>
  <li >Dinner</li>
  <li >Desert</li>
  <li >Soups</li>
  <li >Drinks</li>
</ul>



<div >some content</div>
<div >some content</div>
<div >some content</div>
<div >some content</div>
<div >some content</div>
<div >some content</div>

CodePudding user response：

You'll want the show/hide code to run on each click. You don't really need myValue or myArray at all though.

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 >
  <li >Breakfast</li>
  <li >Lunch</li>
  <li >Dinner</li>
  <li >Desert</li>
  <li >Soups</li>
  <li >Drinks</li>
</ul>
<div  id="group1">some content 1</div>
<div  id="group2">some content 2</div>
<div  id="group3">some content 3</div>
<div  id="group4">some content 4</div>
<div  id="group5">some content 5</div>
<div  id="group6">some content 6</div>

CodePudding user response：

AKX got you on the right track, but classes are intended to be sets of like things. Let's use one and element index to vastly simplify.

The caveat with this is that the quantity and order of the group elements needs to correspond to the list items, but that's a common strategy and is less fragile than managing what amounts to a bunch of arbitrary ID values.

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 >
  <li >Breakfast</li>
  <li >Lunch</li>
  <li >Dinner</li>
  <li >Desert</li>
  <li >Soups</li>
  <li >Drinks</li>
</ul>

<div >some Breakfast content</div>
<div >some Lunch content</div>
<div >some Dinner content</div>
<div >some Desert content</div>
<div >some Soups content</div>
<div >some Drinks content</div>