Creating a switch statement that evaluates the id of $(this) element as a case

I have a menu bar with blocks inside a div. I am looking to create a jQuery script that changes the class of surrounding blocks in the menu when hovering over a specific one. My idea is to use a switch statement that checks the ID of $(this) and then modifies the surrounding classes accordingly. Additionally, I want the class to revert back once I stop hovering over it.

Here is a fiddle to illustrate:

// JavaScript code here...
@import url('styles.css');
<!-- HTML code here... -->

The goal is for #1 and #2 to highlight when hovering over #iz, #2 and #3 to highlight when hovering over #zn, and so forth. The classes should return to their original state when not being hovered over.

Thank you for your assistance!

javascriptjqueryhtmlcssswitch-statement

Answer №1

Give this a shot. No switch necessary.

$(".navbutton").hover( function() {
    $(".mainnav a").removeClass("active");
    $(this).addClass("active");
    $(this).prev().addClass("active");
    $(this).next().addClass("active");

});

Answer №2

Attempt...

instance $(this.attr('id') === "iz"):

...in order to...

condition($(this).attr('id') === "iz"):

...bracket is not included.

Answer №3

In order to properly utilize a switch statement, the key should represent the property of the element, with each case representing a potential value. Your current code is essentially functioning as an if statement, despite the syntax error. Consider revising your code like this:

switch (this.id) {
    case "iz":
        $("#1, #2").addClass("activatedmenubutton");
        break;
}

However, it's important to mention that having a switch statement with only one case is redundant, and you could simply use an if statement instead.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Positioning a Material UI Menu item underneath its parent element using CSS styling

I have created a Material UI dialog that features some text and an Icon with a dropdown menu option. You can check out the demo here: https://codesandbox.io/s/prod-rain-1rwhf?file=/src/App.js My goal is to properly position the Menu component so that it a ...

javascripthtmlcssreactjsmaterial-ui

Is there a way to turn off alerts from Aspx files for HTML and CSS?

Dealing with annoying warnings in my aspx files has been a constant struggle. The "CSS Value is not defined" message pops up when I reference CSS files from different projects, causing unnecessary frustration. Even more frustrating are the warnings about i ...

asp.netjavascripthtmlcssvisual-studio-2008

Adjust alterations in a Vue Component to apply to separate routes

I have a Filter tab component that I use in various routes. When I click on a tab, it becomes active. After clicking on one tab, I want it to remain active in other routes as well. How can I achieve this? Any suggestions or articles would be greatly apprec ...

javascriptvue.jsvuejs2vue-componentvue-router

Looking to convert files like text or images into binary format using Node.js?

I'm struggling to find a solution for converting any type of file (text, image, etc) into binary format using Node. Can anyone provide some guidance on how to accomplish this task? ...

javascriptnode.js

Internet Explorer seems to be having trouble detecting changes made to a jQuery checkbox

Here is an example of HTML code: <input type="checkbox" id="openInNewWindowCheckBox" value ="some_value" /> Accompanied by a jQuery script: $("#openInNewWindowCheckBox").change(function(){ if($(this).is(':checked')) ...

jqueryasp.nethtml

Customize the appearance of HTML5 input types when validation is unsuccessful

Hey everyone I have a question: Is there a CSS trick to style the red border (or shadow) of input fields that have not been validated, such as email inputs? If my explanation isn't clear enough, I'm referring to changing the color of this eleme ...

csshtmlstyling

HTML Plant with background removed

I have been attempting to create a tree structure similar to the image provided. However, I am encountering difficulty in getting the background stripes to align properly for a specific row. When resizing the browser window, the stripes do not remain fixed ...

htmlcsstreeview

The pagination feature in DataTable does not retain the edited page after making changes

I have been encountering an issue while using DataTable serverside processing. My datatable includes an edit column, and when the edit link is clicked, a jQuery dialog box appears. After submitting the dialog box, an ajax.reload call is made. However, the ...

javascriptphpjqueryajaxdatatable

Experiencing difficulties loading webpages while attempting to execute Routes sample code using NodeJS

As a beginner in Javascript, I am attempting to execute the example code provided in the documentation for routes. The code snippet is as follows: var Router = require('routes'); var router = new Router(); router.addRoute('/admin/*?&apos ...

javascriptnode.js

What is an html5 tooltip widget?

I stumbled upon a helpful tutorial on html5canvastutorials.com that caught my eye: let triangle = new Kinetic.Shape(function(){ let ctx = this.getContext(); ctx.beginPath(); ctx.lineWidth = 4; ...

htmlcanvastooltiphtml5-canvaskineticjs

`Vuejs not displaying pdf file correctly`

I am currently using the Laravel DomPDF wrapper to generate PDF files. However, I am facing an issue where I want to render these generated PDF files with my client-side Vue.js app. I have written code that allows me to view and download the PDF file, but ...

javascriptlaravelvue.jsdompdf

Chrome experiencing conflicts with backstretch when using multiple background images

In order to dynamically apply fullscreen background images in a WordPress site, I am utilizing Backstretch.js along with a custom field. Everything is functioning properly for the body's background image. However, there seems to be an issue with anot ...

javascriptjqueryhtmlcssgoogle-chrome

Guide on deleting objects based on their IDs when the IDs are stored in a separate array using JavaScript

I have two separate arrays. One array contains only integers as IDs (from a searchBox) and the other array contains objects, such as: categories = [1, 2, 5, 8]; items = [ { title: 'Hello', description: 'any description you want', cat ...

javascriptvue.jsnuxt.js

Discover the unseen: The ultimate guide to detecting visible objects in a (deferLoad) event

I'm utilizing the (deferLoad) method to load an image gallery in a more controlled manner. Is there any event available that can inform me about which items are currently visible? The main goal is to load a set of data along with an image path, and t ...

javascriptangulartypescriptlazy-loading

Hacking the power of combining Bootstrap 3 with AngularJS to create a unique

Recently, I came across this HTML code snippet that got me thinking: <div class="input-group"> <input type="number" class="form-control" name="distance" ng-model="calculatorData.distance" placeholder="Distancia" required> ...

jqueryangularjstwitter-bootstrap

Tips on setting up AJAX/JSON with the Jackson library in Spring?

I previously inquired about how to refresh a specific section of a JSP page using Spring MVC on this platform. I attempted to send a value via AJAX to my Controller, but encountered difficulties. However, I managed to overcome it without utilizing JSON. ...

javajqueryjsonajaxspring

Mongoose Alert Utility Directive

const mongoose = require('mongoose'); module.exports = { init: () => { const dbOptions = { useNewUrlParser: true, useUnifiedTopology: true, autoIndex: false, reconnectTries: Number.MA ...

javascriptnode.jsdatabasemongodb

Utilizing flex-box for smooth transitions in React Router with react-tranisition-group

Currently, I am working on implementing transitions for my react-router page using react-transition-group. All of my page content is wrapped inside a container, and I have applied flex-box to center the container. Unfortunately, I am facing issues with g ...

cssreactjsreact-transition-group

Struggling to destructure props when using getStaticProps in NextJS?

I have been working on an app using Next JS and typescript. My goal is to fetch data from an api using getStaticProps, and then destructure the returned props. Unfortunately, I am facing some issues with de-structuring the props. Below is my getStaticProp ...

javascripttypescriptnext.js

How to handle an undefined value in a jQuery ajax call when utilizing promises

I've been struggling with the issue of jQuery ajax calls returning values before they've been updated. Despite trying numerous solutions found through Google searches, none seem to work for me. The problem lies in getting an undefined value becau ...

jqueryajax