I am trying to create a menu for practice, that contains different categories of meals. (i.e breakfast, lunch, snacks, etc.) I am making this menu to where there are 8 rows that when one of them is clicked, it shows a previously hidden description about that particular item. I am having trouble implementing the JS behind showing the menu description. I am not sure if all of the rows need to have unique class names, but I am not sure exactly how to select one row when clicked and then produce the output for only that particular row. Here is my current code at the moment (Note: The description has not been created yet) Also, I am new to web development, so anything that would point me in the right direction, even if it's not a full answer will be helpful :)
HTML
<section class = "section section-menu">
<div class = "option">
<div class = "option-container">
<img src = "img/Breakfast-Figma.png" alt="Breakfeast img">
<h3 class = "option-text"> Breakfeast</h3>
</div>
<ion-icon name="chevron-up-circle-outline" class = "dropdown-arrow"></ion-icon>
</div>
<div class = "option">
<div class = "option-container">
<img src = "img/CFA-Spicy-Chicken-Entree-Figma.png" alt="Spicy Chicken img">
<h3 class = "option-text"> Entreés</h3>
</div>
<ion-icon name="chevron-up-circle-outline" class = "dropdown-arrow"></ion-icon>
</div>
<div class = "option">
<div class = "option-container">
<img src = "img/Salad-Figma.png" alt="Salad img">
<h3 class = "option-text"> Salads</h3>
</div>
<ion-icon name="chevron-up-circle-outline" class = "dropdown-arrow"></ion-icon>
</div>
<div class = "option">
<div class = "option-container">
<img src = "img/Large-Fries-Sides-Figma.png" alt="Fries img">
<h3 class = "option-text"> Sides</h3>
</div>
<ion-icon name="chevron-up-circle-outline" class = "dropdown-arrow"></ion-icon>
</div>
<div class = "option">
<div class = "option-container">
<img src = "img/Kids-Meal-Figma.png" alt="Kids Meal img">
<h3 class = "option-text"> Kid's Meals</h3>
</div>
<ion-icon name="chevron-up-circle-outline" class = "dropdown-arrow"></ion-icon>
</div>
<div class = "option">
<div class = "option-container">
<img src = "img/Milkshake-Treat-Figma.png" alt="Milkshake img">
<h3 class = "option-text"> Treats</h3>
</div>
<ion-icon name="chevron-up-circle-outline" class = "dropdown-arrow"></ion-icon>
</div>
<div class = "option">
<div class = "option-container">
<img src = "img/Beverage-Figma.png" alt="Beverage img">
<h3 class = "option-text"> Drinks</h3>
</div>
<ion-icon name="chevron-up-circle-outline" class = "dropdown-arrow"></ion-icon>
</div>
<div class = "option">
<div class = "option-container">
<img src = "img/CFA-Dipping-Sauce-Figma.png" alt="Dipping Sauce img">
<h3 class = "option-text"> Dipping Sauces & Dressings</h3>
</div>
<ion-icon name="chevron-up-circle-outline" class = "dropdown-arrow"></ion-icon>
</div>
</section>
<script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
CSS
.section-menu {
margin-top: 5%;
}
.option {
width: 75%;
margin: 0 auto;
display: flex;
}
.option-container {
width: max-content;
display: flex;
}
.option-text {
float: right;
margin: auto;
font-family: Apercu-light;
}
.dropdown-arrow {
height: 60px;
font-size: 22px;
float: right;
margin: auto;
margin-right: 5%;
}
No JS yet, because my attempts have yielded no noticeable results.
CodePudding user response：
Elements do not need to have distinct class names, but you can use additional class names as needed and be as specific as needed when referencing elements with the specified class(es). You could use the id attribute for distinct element selection if you wanted to and reference them in JavaScript using getElementById.
My recommendation is to use addEventListener in JavaScript. If you want to place a click eventListener on each of the <div class="option"> elements, you can select them all in JavaScript with getElementsByClassName or querySelectorAll, then apply event listeners in a forEach loop as follows.
Note: although options has a forEach method like an Array, it is actually an HTMLCollection
const options = document.querySelectorAll(".option");
options.forEach(function(option) {
option.addEventListener("click", function(event) {
var element = event.target;
if (element.tagName === "IMG") {console.log(element.src);return;}
console.log(event.target.textContent.trim());
});
});<section class="section section-menu">
<div class="option">
<div class="option-container">
<img src="img/Breakfast-Figma.png" alt="Breakfeast img">
<h3 class="option-text"> Breakfeast</h3>
</div>
<ion-icon name="chevron-up-circle-outline" class="dropdown-arrow"></ion-icon>
</div>
<div class="option">
<div class="option-container">
<img src="img/CFA-Spicy-Chicken-Entree-Figma.png" alt="Spicy Chicken img">
<h3 class="option-text"> Entreés</h3>
</div>
<ion-icon name="chevron-up-circle-outline" class="dropdown-arrow"></ion-icon>
</div>
<div class="option">
<div class="option-container">
<img src="img/Salad-Figma.png" alt="Salad img">
<h3 class="option-text"> Salads</h3>
</div>
<ion-icon name="chevron-up-circle-outline" class="dropdown-arrow"></ion-icon>
</div>
<div class="option">
<div class="option-container">
<img src="img/Large-Fries-Sides-Figma.png" alt="Fries img">
<h3 class="option-text"> Sides</h3>
</div>
<ion-icon name="chevron-up-circle-outline" class="dropdown-arrow"></ion-icon>
</div>
<div class="option">
<div class="option-container">
<img src="img/Kids-Meal-Figma.png" alt="Kids Meal img">
<h3 class="option-text"> Kid's Meals</h3>
</div>
<ion-icon name="chevron-up-circle-outline" class="dropdown-arrow"></ion-icon>
</div>
<div class="option">
<div class="option-container">
<img src="img/Milkshake-Treat-Figma.png" alt="Milkshake img">
<h3 class="option-text"> Treats</h3>
</div>
<ion-icon name="chevron-up-circle-outline" class="dropdown-arrow"></ion-icon>
</div>
<div class="option">
<div class="option-container">
<img src="img/Beverage-Figma.png" alt="Beverage img">
<h3 class="option-text"> Drinks</h3>
</div>
<ion-icon name="chevron-up-circle-outline" class="dropdown-arrow"></ion-icon>
</div>
<div class="option">
<div class="option-container">
<img src="img/CFA-Dipping-Sauce-Figma.png" alt="Dipping Sauce img">
<h3 class="option-text"> Dipping Sauces & Dressings</h3>
</div>
<ion-icon name="chevron-up-circle-outline" class="dropdown-arrow"></ion-icon>
</div>
</section>CodePudding user response：
U can use "this" to click particular element from different element having same class. Example: You have "option" class , u can do something like this.
$("option").click(fucntion() {
$(this).foo()
})