Swap a jQuery class with another if the class for ul li is currently active

I am currently developing a form builder and I would like to customize the appearance, specifically changing the color of the text. I want the text to be white when the class is set to active, and black when the class is not active.

Is there a way to achieve this using two generated classes?

I came across some information on a forum but it doesn't seem to be working for me:

 $('.game-star').addClass('game-star2').removeClass('game-star');
.game-star  ul li h3 {
font-size:14px;
color:#fff;
line-height:24px;
float:left;
font-weight:100;
margin-top:8px;
}

.game-star2  ul li h3 {
font-size:14px;
color:#fff;
line-height:24px;
float:left;
font-weight:100;
margin-top:8px;
}
 
<div class="game-star" style="height: 198px; overflow: hidden;">
  <ul>
    <li class="Active">
      <div class="game-star-icon"></div>
      <h3 class="winner-name">Major Millions<br>
        RMB 1000.00</h3>
      
    </li>
    <li>
      <div class="game-star-icon"></div>
      <h3 class="winner-name">Major Moolah<br>
        RMB 3,266.41</h3>
    </li>
    <li>
      <div class="game-star-icon"></div>
      <h3 class="winner-name">Major Moolah Isis<br>
        RMB 4,982.78</h3>
    </li>
    <li>
      <div class="game-star-icon"></div>
      <h3 class="winner-name">发大财<br>
        RMB 8,888.88</h3>
    </li>
    <li>
      <div class="game-star-icon"></div>
      <h3 class="winner-name">我发我发我发发发<br>
        RMB 9,999.99</h3>
    </li>
  </ul>
</div>


my CSS :

javascriptjquerycss

Answer №1

Why use two different CSS classes when you can achieve the same effect with just one using the CSS Attribute Selector? This powerful selector allows you to target specific elements based on their attributes, making your CSS code cleaner and more efficient. For example, instead of having separate classes for active items, you can simply add or remove the attribute class=Active to your HTML element.

While my previous example may not be the best practice, a better approach would be to use something like 

.game-star ul li[data-active=Active]
. This ensures clarity in your code and avoids any confusion between class names and attribute selectors. You can combine selectors, class names, and IDs to enhance the specificity of your styles. Learn more about it here.

Based on this, I recommend updating your code as follows:

HTML

<div class="game-star" style="height: 198px; overflow: hidden;">

<ul>
    <li data-active="true">
        <div class="game-star-icon"></div>
        <h3 class="winner-name">Major Millions<br>RMB 1000.00</h3>
    </li>
    <li>
        <div class="game-star-icon"></div> 
        <h3 class="winner-name">Major Moolah<br>RMB 3,266.41</h3>
    </li>
    <li>
        <div class="game-star-icon"></div>
        <h3 class="winner-name">Major Moolah Isis<br>RMB 4,982.78</h3>
    </li>
    <li>
        <div class="game-star-icon"></div>
        <h3 class="winner-name">发大财<br>RMB 8,888.88</h3>
    </li>
    <li>
        <div class="game-star-icon"></div>
        <h3 class="winner-name">我发我发我发发发<br>RMB 9,999.99</h3>
    </li>

</ul>
</div>

CSS

.game-star ul li[data-active=true] h3 {
    font-size:14px;
    color:#fff;
    line-height:24px;
    float:left;
    font-weight:100;
    margin-top:8px;
}

EDIT: If you prefer to stick with your original method, here is a fiddle that demonstrates it. Feel free to customize the colors to suit your design preferences! :)

JSFiddle

Answer №2

Revamp your look with this new style:

.game-star  ul li,.game-star2  ul li {
    font-size:14px;
    color:#000;
    line-height:24px;
    float:left;
    font-weight:100;
    margin-top:8px;
}

.game-star ul li.Active,.game-star2  ul li.Active{
    color:#fff;
}

Answer №3

I made some updates to the code. The classes are now equal. When active, the text will appear in white color while the rest of the text will be black.

.game-star  ul li h3,
.game-star2  ul li h3{
    font-size:14px;
    color:#000;
    line-height:24px;
    float:left;
    font-weight:100;
    margin-top:8px;
}

.game-star  ul li.active h3,
.game-star2  ul li.active h3 {
    color:#fff;
}

http://jsfiddle.net/pyjuk106/2/

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

How to modify the overlay color in the TouchableHighlight component using an arrow function in React Native

With touchableHighlight, I found that I could easily modify the overlay color using the following code: <TouchableHighlight onPress={this.toggle.bind(this)} underlayColor="#f1f1f1"> However, when attemptin ...

javascriptiosreact-native

Enhancing user experience with Ajax login forms that seamlessly integrate with browser password remember functionality

I recently implemented an ajax-based login form on my website, but it seems that browsers are not recognizing it as a login form and therefore not offering to remember passwords for easier login access. Once the submit button is clicked, the entered value ...

javascriptajaxauthenticationpasswords

Inexplicably, HighCharts flips its axis when exporting data

I am facing an issue with the display of my Highchart in the web application. While it appears correctly in the browser, the exported chart flips the axis and shows a different image. Below are the options I have configured for my Highchart: var options = ...

javascriptjquerychartshighcharts

Wait for the scope value to become available before executing the directive or div

I have a unique directive created for SoundCloud that necessitates the SoundCloud URL. The URL is fetched from the database using the $http service, but the issue arises when the div for the directive is loaded before the URL value is defined. The code fo ...

javascriptjqueryangularjsasynchronous

Connecting JavaScript and HTML in EclipseWould you like to know how to link

After completing the Rock Paper Scissors exercise on Codecademy, I wanted to transfer it to my Eclipse IDE. The code worked perfectly on the Codecademy platform, so I copied everything and created a .js workspace in Eclipse to paste it there. Now, my ques ...

javascriptjqueryhtmleclipseide

The registration feature powered by JQuery is experiencing technical difficulties and not functioning

Having trouble with a registration system on my website at *. When someone registers, it should either show an error message or display "true" if the registration is successful. I have a javascript file (http://pastebin.com/mv9CWZcT) set up to redirect the ...

javascriptjqueryajaxhttp-redirect

"Exploring the concepts of inheritance in Typescript

I'm seeking answers regarding inheritance in TypeScript/JavaScript. Below is my base class (express controller router): abstract class BaseCtrl { abstract model; // Get all getAll = (req, res) => { this.model.find({}, (err, docs) => ...

javascriptnode.jsexpresstypescript

Switch up a font style using JavaScript to apply a Google font effect

I am attempting to implement a discreet hidden button on a website that triggers a unique Google font effect for all of the h1 elements displayed on the page. However, I am uncertain about the process and unsure if it is achievable. Below is the code snipp ...

javascriptjquerygoogle-font-api

What's the best way to track changes in multiple form fields simultaneously in Angular?

Situation I have a form with 8 fields, but I want to monitor changes in just three of them to apply the same function. I don't want to set up individual subscriptions for each field like this: this.headerForm.get('start').valueChanges.subsc ...

javascriptangulartypescript

What is the method for ensuring text remains within a square while it is being relocated?

Check out this jsfiddle where you can interact with a moving square: http://jsfiddle.net/helpme128/3kwwo53t/2/ <div ng-app="test" ng-controller="testCtrl"> <div id="container"> <div class="shape" ng-draggable='dragOptions& ...

javascripthtmlcssangularjs

Is it possible to create custom input fields using the Stripes Payment-Element?

I recently integrated Stripe into my next.js application to facilitate one-time payments. Following the standard tutorial for Stripe Elements, I created a PaymentIntent on initial render: useEffect(() => { // Create PaymentIntent as soon as the ...

javascriptnode.jsnext.jsstripe-paymentsstripe-payment-intent

Drop your friend a line, I'm curious about the Javascript API

As a developer hailing from the Republic of Korea, I am currently in the process of creating websites that are based on Facebook and Twitter. I am interested in utilizing a JavaScript API that allows me to send messages to friends. Initially, I considered ...

javascriptfacebookfacebook-graph-api

I needed to integrate CustomPicker into my functional component within a react native project

Could someone please clarify if I wish to convert the CustomExample Class component into a functional component **like this: ** const CustomExample = () =>{...} then how would I modify the following code to function in a similar manner: <Custo ...

javascriptreactjsreact-nativejsxpicker

Passing state from a parent component to a child component and then down to subsequent child components through props in React.js

Currently, all the data is static information. I am using a parent state which is an array containing 4 objects: function App(){ const [searchResults,setSearchResults] = useState([ { name: 'name1', artist: 'artist ...

javascriptreactjsreact-hooks

The personalized confirmation dialog is experiencing malfunctions

I have designed my own custom dialogs using Bootstrap and jQuery, such as Alert and ConfirmDialog. Here is a sample: http://jsfiddle.net/eb71eaya/ The issue I am facing is that in the callback function, I make an AJAX call. If it returns true, I want to ...

javascriptjqueryajaxtwitter-bootstrapbootstrap-modal

Error loading custom Javascript in MVC 4 view during the first page load

I'm working on an MVC 4 application that utilizes jQuery Mobile. I have my own .JS file where all the functionality is stored. However, when I navigate to a specific view and check the page source, I notice that all scripts files are loaded except fo ...

javascriptjqueryhtmlasp.net-mvcjquery-mobile

Revise the validation process for the drop-down menu and input field

Looking for help with text field validation based on a dropdown selection. There are two scenarios to consider: 1. User changes dropdown value and then enters text in the field. 2. User enters text in field and then changes dropdown. I've written cod ...

javascriptjqueryjquery-uivalidation

Prompt triggered within AJAX request

I am facing an issue with my ajax call in which I am trying to invoke a php function containing an alert. However, the alert is not getting triggered and instead it returns me the JavaScript code (visible inside the console). How can I successfully use an ...

javascriptphpjqueryajax

Trying to figure out how to execute a codeigniter helper function with JQuery AJAX?

I created a handy function in my helper file within codeigniter that formats prices based on the value and currency ID provided. if(!function_exists('format_price')){ function format_price($val,$curency_id=NULL){ $CI ...

javascriptphpjqueryajaxcodeigniter

How can I transfer data to a different component in Angular 11 that is not directly related?

Within the home component, there is a line that reads ...<app-root [message]="hii"> which opens the app-root component. The app-root component has an @input and {{message}} in the HTML is functioning properly. However, instead of opening t ...

javascriptangulartypescript