Apply a class to each element that contains the specified name attribute

I have successfully implemented a prices tab on the top of my page, with tabs for different packages at the bottom. When a user selects a certain package, only specific items from the list are visible while the others are hidden. I managed to streamline this process by using the same div for all three packages and adding attributes to each list item. The goal is for users to click on a tab, which will then locate the corresponding attribute within the list and apply an active class to that item. I have been working tirelessly on this issue for quite some time now, but have yet to find a solution. Can anyone offer some assistance?

[https://jsfiddle.net/90mynos3/][1]
javascriptjqueryhtmlcss

Answer №1

From what I gather from your query, there are 2 problems in your code that need to be addressed.

Firstly, the active class is not being removed, so once it's activated, it remains that way indefinitely. To fix this issue, you can add the following line at the beginning of your code to remove the visible class:

$('li.visible').removeClass('visible');

Secondly, to correctly add the class, you need to target the right elements using an attribute selector. You can achieve this by using the following code snippet:

$('li[data-clean-group~="' + get_class + '"]').addClass('visible');

By utilizing the ~= operator, you ensure that only li elements with a data-clean-group containing the exact word stored in get_class will match, avoiding any confusion between similar words like standard and standard_plus.

Feel free to check out this modified version of your fiddle for a functional demonstration and refer to this resource on attribute selectors for a more in-depth understanding of how to use them effectively.

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

aligning content that has exceeded the boundaries

I have a list of dynamically created <a> tags without text, to which I apply background images. These icons are displayed within a <div> container using the float: left; style. As the row of icons becomes too long, it overflows and starts a ne ...

htmlcss

The console displays "undefined" when formatting API data

I am attempting to format the data retrieved from an API since there is a lot of unnecessary information. However, when I try to display the formatted data in the console, it always shows as "undefined" or "null." I am importing and calling the fetch API ...

javascriptreactjs

How can curly braces be utilized in an array reduce method?

If the function `fn3` is used instead of `fn2` in this code snippet running on node 9.5.0, the `console.log(totalUpvotes)` will display `undefined`. Shouldn't it actually be equal to 92? const posts = [{id: 1, upVotes: 2}, {id:2, upVotes: 89}, {id: ...

javascriptnode.jslambdaecmascript-6arrow-functions

What is the best way to shorten string values that exceed a certain length?

Here is an array list I have: $myarray = array( array( 'name' => 'File name 1 - type.zip', 'size' => '600KB', ), array( 'name' => 'File name 2 - type.pdf&a ...

javascriptphphtmlcss

Updating a slider based on the values of two other sliders can be achieved by implementing a

I am working on a project that involves three input sliders. I need the third slider to display the product of the values from the first two sliders. Additionally, I want the value of the third slider to update dynamically whenever the values of the first ...

javascripthtmlangularjsslider

Disable touch interactions on the body, only allow pinch-zoom on specific elements

I have been attempting to implement the following code: body { touch-action: none; } .left-side { touch-action: pinch-zoom; } <div class="left-side"><img src="image.jpg" /></div> The touch-action: none is functioning properly, but ...

javascriptjqueryhtmlcss

Firebase scheduled function continues to encounter a persistent issue with an "UNAUTHENTICATED" error being consistently thrown

I have created a firebase-function that is scheduled to retrieve data from an external API source and save it in Firestore. const functions = require("firebase-functions"); const admin = require("firebase-admin"); const { default: Axios ...

javascriptnode.jsfirebasegoogle-cloud-platformgoogle-cloud-functions

Loading 3D models in Three.js from the cache

Every time my page reloads, the loader loads objects from the URL instead of cache. Is there a way to check if the resource is in cache and load it directly? Appreciate your help! ...

javascripthtmlthree.js

Having trouble getting jQuery form validation to recognize the $.post element

I need to create a validation system for my form that covers basic checks like minimum username length, while also ensuring that the username and email are not already in use (requiring a database search). After some trial and error, I've identified ...

jqueryajaxformsvalidationsubmit

Struggling to make rCarousel function properly due to navigation width and autoscroll issues

I'm having some trouble figuring out what's going wrong with my rCarousel setup. Specifically, I can't seem to get the top part labeled "vrienden van het koksgilde" to work properly. Despite following the instructions on , I'm still no ...

jqueryhtmlcsscarousel

Is there a way to execute Javascript in Django without revealing static files?

When setting up payments on my Django site using Stripe, I realized that the .js file is visible under Sources in the developer tools when inspecting elements on any browser. This presents a potential security risk as anyone can access this file. How can ...

javascripthtmldjangosecuritystatic

including a callback in a loop

I am attempting to have jQuery delete an element after it has gone through a series of other functions, however the following code executes the remove() command before the for loop runs any iterations. function waves(){ for(i=0;i<=10;i++){ ...

javascriptjquerycallback

To begin, select and upload two files for processing. Once complete, you can download the newly generated

I'm encountering difficulties attempting to upload two files to a php script and have the page download a newly merged file without redirecting to a different page. I do not wish to store any files on the server due to their potential size (2MB) as b ...

javascriptjqueryajax

The AJAX data submission did not go through as expected

I am facing an issue with two files on my site - home.php (view) and home.php (controller). In the home.php (view) file, I have a jQuery function that sends an AJAX request based on the W3 example. However, in the home.php (controller) file, the PHP variab ...

phpjqueryajax

Adjusting the transparency of TabBadge in Ionic 2

I am currently working on a project that involves tabs, and I'm looking to update the style of the badge when the value is 0. Unfortunately, I am unsure how to dynamically change the style of my tabs or adjust the opacity of the badge in the style. M ...

cssangulartypescriptsassionic2

Utilizing the jQuery slideToggle method on the specified target element

I'm encountering an issue with jQuery slideToggle, and here's the code I have: $(".dropdownmainmenu").click(function(){ $(this).children(".showmenu").slideToggle(); $(this).toggleClass("activemainmenu"); $(this).find(".showarrowmainmen ...

javascripthtmljquerydrop-down-menudropdown

Error message: The function pokemon.map does not exist

I'm new to learning react and I've been working on creating a react app using the pokemon API. However, I've encountered an error that says TypeError: pokemon.map is not a function. I'm unsure why .map is not recognized as a function in ...

javascriptreactjsdebuggingreduxfrontend

Using JavaScript in Django templates: Displaying errors with a JavaScript function

Update: I recently made changes to my code, and it now looks like this: <script> function updateFunction(calibrationId) { document.getElementById(calibrationId).innerHTML = "<ul><li>" + calibrationId + "</li>" ...

javascriptdjango

Resolve issues with vue js checkbox filtering

As I embark on my Vue journey, I came across some insightful queries like this one regarding filtering with the help of computed(). While I believe I'm moving in the right direction to tackle my issue, the solution has been elusive so far. On my web ...

javascripthtmlvue.js

Design my div layout to resemble a tree shape

Take a look at this URL. I have dynamically created divs in a nested structure for a sports tournament. I need help styling the divs to match the tournament structure. This is how I want my structure to look. The code is functioning properly, it's ju ...

javascripthtmlangularjs