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

Receiving a Javascript Callback from Paypal

Is it possible to receive a JavaScript callback after a successful PayPal purchase made using a button? I am aware of IPN, but it requires a return URL. My main goal is to simply determine if a user has completed a purchase with the button. ...

javascriptjquerypaypal

The function this.$set is failing to update an array in VueJS

I am facing an issue where the console log shows me the updated array xyz, but when I try to print it in the DOM using {{xyz}}, it does not update. Can anyone shed some light on why this might be happening? data() { return { xyz: [] } }, met ...

javascriptarraysvue.jsvuejs2

Using Jquery to toggle columns based on their index and custom attribute

My table has two rows in the header: the first row with colspan and the second row containing headers. You can see an image below for reference. With a jQuery function, I extract all the table cell values from the second header row and add them to a div w ...

javascriptjqueryarrayshtmlhtml-table

Captivating captions for captivating visuals. Pictures don't conform to a linear arrangement

As someone who is new to website creation, I am currently working on adding a CSS effect where a popup-text appears when an image is hovered over. I want to create a row of images for the popups by using an unordered list. However, I'm facing a proble ...

css

Ways to verify if the user has inputted a typeahed value

My code snippet looks like this: var students = new Bloodhound({ datumTokenizer: Bloodhound.tokenizers.obj.whitespace('fullName'), queryTokenizer: Bloodhound.tokenizers.whitespace, remote: { ...

javascriptjquerytypeahead.jstypeahead

Can you provide a list of factors that influence coverage? Additionally, is there a specific algorithm available for calculating

As part of my Angular project, I am currently focusing on writing unit test cases using the Jasmine Framework and Karma. To ensure thorough testing coverage, I am utilizing Coverage-html (Istanbul). When it comes to coverage, there are several important t ...

javascriptangularjsjasminekarma-jasmineistanbul

Setting the current date of a jQuery datepicker to the value of an input tag

I am looking to assign a value to an input tag that has a datepicker attached to it. Upon initialization of the datepicker, I want to set this value. Below is a hypothetical example of what I am trying to achieve: HTML: <input id="test" value="">&l ...

javascriptjquerydatepicker

How can I upload an image file using VueJS and Django Rest Framework?

Hello, I am currently in the process of editing a blog page using VueJS and Django Rest Framework. However, I am facing an issue when trying to upload a photo - I keep receiving an error message stating that "the sent data is not a file." Additionally, I a ...

javascriptdjangovue.jsdjango-rest-frameworkaxios

Error encountered while attempting to make AJAX call: "`$.ajax` parse error on JSON object: {"vErrorsFound":true,"vMessage"

I am trying to update my code from using jQuery 1.3.2 to jQuery 1.5, but I am facing issues with parsing JSON data. I have a PHP script that returns the following JSON object using json_encode: {"vErrorsFound":true,"vMessage":"Login Failed"} I have exper ...

jqueryajaxjsonparsing

Feeling uncertain about Node, NPM, Bower, and how to set them up for Bootstrap?

Looking to expand my knowledge in web development, I have a solid understanding of HTML, JS, CSS, and server-side programming. However, the concepts of Nodejs, npm, and Bower are still unclear to me. In order to begin a new project, I created a designated ...

javascriptnode.jstwitter-bootstrapnpmbower

Incrementing values in ng-repeat object automatically

My project involves extracting game information from mlb.com and utilizing angularjs along with the ng-repeat directive to display it. A sample of the JSON feed is shown below. { "data": { "games": { "next_day_date": "2017-08-19", "mo ...

javascriptangularjsjson

Adjust the message hues upon form submission with Ajax

Can anyone provide assistance? I am in need of a functional form for sending emails. <form enctype="multipart/form-data" role="form" id="form" method="post" action="handler.php"> <div class="form-row"> <div class="form-g ...

phpjquerycssajax

Encountering a SyntaxError with the message 'Unexpected token' while trying to require a module in strict mode from JSON at position 0

Within the index.js file, the following code is present: 'use strict'; const config = require('./config'); In the config.js file, the code looks like this: 'use strict'; const config = new function() { this.port = 3000; ...

javascriptjsonnode.jsmodulestrict

Is there a workaround for unresolved symlink requirements when using npm link?

Creating an NPM package often involves using the following: npm link This allows for making modifications to a package called <myPackage> during development without constantly having to publish and unpublish! Developers can make changes locally and ...

javascripterror-handlingnpmnpm-link

"Communication + AngularJS + Social Networking - The Perfect Trio

I'm currently in the process of developing an Angular app that will eventually be compiled using PhoneGap for both Android and iOS platforms. While testing various plugins to incorporate Facebook integration (specifically for login and sharing), I enc ...

angularjshtmlfacebookcordovaphonegap-build

Experience the seamless transition of new CSS animations

I designed a basic HTML game where a moving box disappears when clicked on. However, the animation that follows does not originate from the click location but rather from the original position. I believe the remove @keyframes at 0% should be based on the ...

javascripthtmlcsscss-animations

Ways to leverage ember.js in a serverless environment

After checking out the example of ember.js on this website (http://todomvc.com/), I decided to clone the project onto my computer. Upon double-clicking the index.html file, the project ran smoothly, just as I had anticipated. However, following the instru ...

javascriptember.js

Firebase Functions: Your functions are missing a definition

I have the following code in index.js: exports.makeUppercase = functions.database.ref('/messages/{pushId}/original').onCreate((snapshot, context) => { // Fetch the current value written to the Realtime Database. const original = snapshot. ...

javascriptnode.jsfirebasegoogle-cloud-functions

Tips for creating a Vue component that triggers the select dropdown to open when the entire div or wrapper is clicked

I have a custom-designed select dropdown with unique symbols for the select arrow. To achieve this look, I've hidden the default select arrow/triangle and placed our symbol on top as an image file. <div class="select-wrapper"> < ...

javascripthtmlcssvue.js

Exploring the Possibilities of Socket.io Integration with Express 4 Across Multiple Pages: Dive Into Socket.io Sample Code

Just to clarify, I came across a similar question on Stack Overflow before posting this. However, the answer there was not clear to me and my query is slightly different. Thus, I am hoping for a more straightforward explanation. The Express Generator sets ...

javascriptnode.jsexpresssocket.io