I am attempting to apply a class to #cart-total-remove using the location function, but despite trying various methods, I have been unable to make it work

This function is responsible for updating the cart successfully

success: function(json) {
                // Setting a timeout to ensure total update
                setTimeout(function () {
                    $('#cart > button').html('<span id="cart-total-remove"><img src="http://localhost/nerv/image/catalog/icons/bag.png"/> ' + json['total'] + '</span>');
                }, 100);

                if (getURLVar('route') == 'checkout/cart' || getURLVar('route') == 'checkout/checkout') {
                    location = 'index.php?route=checkout/cart';
                } else {
                    $('#cart > ul').load('index.php?route=common/cart/info ul li');
                }
            },

I also included the class "change-remove" for later styling purposes

$(document).ready(function() {
    
    if ( window.location.href == 'http://localhost/nerv/index.php?route=common/home' ){
        $("#cart #cart-total-remove img").removeClass("change-remove");
    } else {
        $("#cart #cart-total-remove img").addClass("change-remove");
        console.log(window.location.href);
    }

});

Below are my custom CSS styles

#cart #cart-total-remove img {
    filter: invert(1);
}
#cart #cart-total-remove img.change-remove{
    filter: none;
}

I would greatly appreciate any advice or assistance

Answer №1

Give this a try if you need assistance.

The CSS rule you are working with includes the class img.change-remove, while the class you want to add is simply .change-remove, so your CSS should be adjusted accordingly:

Take note of the change in the CSS code from img .change-remove to img.change-remove

#cart #cart-total-remove img {
filter: invert(1);
}
#cart #cart-total-remove img .change-remove{
filter: none;
}

Answer №2

Make sure to test both conditions to see if they are functioning correctly

$(document).ready(function() {
    
    if ( window.location.href == 'http://localhost/nerv/index.php?route=common/home' ){
        $("#cart-total-remove img").removeClass("change-remove");
    } else {
        $("#cart-total-remove img").addClass("change-remove");
        console.log(window.location.href);
    }

});

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

Two select boxes trigger multiple sorting operations

Struggling to implement 2 different sorting operations on two separate columns in a datagrid, using 2 different select boxes has proven to be challenging. I attempted the code below, but as a beginner, I was unable to solve it... In HTML: <select ng ...

Encountering a snag while setting up Google authentication on my website

Currently, I am in the process of integrating Google Authentication into my website. However, I have run into an error related to session management that reads as follows: TypeError: req.session.regenerate is not a function at SessionManager.logIn (C:&bso ...

What is the importance of always catching errors in a Promise?

In my project, I have implemented the @typescript-eslint/no-floating-promises rule. This rule highlights code like this - functionReturningPromise() .then(retVal => doSomething(retVal)); The rule suggests adding a catch block for the Promise. While ...

Having trouble downloading a PDF file on a local server with React and the anchor tag element

Having trouble downloading a pdf file from my react app to my Desktop. I've reached out for help with the details How to download pdf file with React. Received an answer, but still struggling to implement it. If anyone new could provide insight, that ...

What could be the reason I am unable to choose data properties from the dropdown options?

There are two different dropdowns for clothing types and colors. When a type of clothing is selected from the first dropdown, JSON data will fill the second dropdown with options based on the first dropdown selection. After selecting an option from the se ...

Enhance the overall appearance of select elements across all components using Material UI's

I'm attempting to change the border color of my outlined select elements using the code below, but it's not working as expected. It seems that the border style is being inherited from the fieldset element. I've experimented with using MuiOut ...

The Click Event is failing to trigger for a dynamically created ID within a span element

I am currently working on a Task Project. In this project, I have been adding items dynamically and generating items dynamically as well. However, when it comes to deleting items by clicking on a span element, the click event doesn't seem to work. I ...

Ways to adjust the height of one panel based on the height of surrounding panels

I have a layout with three panels: two on the left side and one on the right. <div class="row"> <div class="col s6"> <div class="panel"> content1 </div> <div class="panel"> ...

Preview of Hoverbox Caption

I'm working on a website using the Hoverbox image gallery (http://host.sonspring.com/hoverbox/) and I'm trying to include captions for each image preview that appears when hovering over the enlarged image. However, I am facing difficulty as I hav ...

Problem Encountered with Bootstrap 3 Date and Time Selector

I am currently utilizing the date/time picker created by Eonasdan, which can be accessed here. Below is the HTML code snippet from the example: <div class="container"> <div class="col-md-10"> <div class='well'> ...

Combining data from two JSON files following a specific format

I am working with two JSON files structured as follows: File 1 [ { "line": 2, "elements": [ {} ] } ] File 2 [ { "line": 3, "elements": [ {} ] } ] My goal is to combine these files into one output file that l ...

Using React.js - Discover the best way to incorporate a function within a child component to unmount a different child component from the same parent, and then mount a new component in its place

Consider this scenario: import React, { Component } from 'react'; import BodyContent from './BodyContent'; import BottomOne from './BottomOne'; import BottomTwo from './BottomTwo'; class App extends Component { re ...

How do you convert a dictionary object into JSON in Django?

I'm facing a simple issue that needs to be resolved: >>> from django.core import serializers >>> serializers.serialize("json", {'a':1}) Traceback (most recent call last): File "<console>", line 1, in <module> ...

Stop an animation while it is in the hover state

Currently experimenting with CSS3 Animations to create a Panoramic view using only CSS and no JavaScript. I have managed to create a somewhat working demo: http://www.example.com/images/panoramic/ The concept is simple: when the user hovers over the blac ...

CSS: Problem Arising from Line Connections Between Tree Elements

I'm currently working on connecting tree nodes with lines in a drawing. I've managed to achieve it to some extent, but there are a few issues like dangling lines that I need to fix. You can find the implementation on codepen here: https://codepe ...

What is the best way to attach every sibling element to its adjacent sibling using jQuery?

I've been working with divs in Wordpress, where each div contains a ul element. <div class="list-item"> <div class="elimore_trim"> Lorem ipsum </div> <ul class="hyrra-forrad-size-list"> <li>Rent 1< ...

Troubleshooting problem with the Node and Mongoose update function

I am looking to update a document that has already been queried: The method of saving in memory seems to be working well: project.likers.push(profile.id); project.set({ likes: project.likes + 1 }) await project.save(); However, I came across a blog p ...

Having trouble positioning text alongside a checkbox in Bootstrap v3.3.6?

Dealing with the alignment of checkboxes in Bootstrap forms is driving me crazy. It seems to look almost perfect on both Chrome and IE on my desktop, where the text and checkbox are aligned almost perfectly. However, when I view it on Chrome on my tablet ...

Creating a dropdown menu in Bootstrap 5 without using any of the Bootstrap

In my Angular application, I have a header with icons and pictures that I would like to use as dropdown menus. The code snippet for this functionality is shown below: <li class="nav-item dropdown"> <a class="nav-li ...

Increase the border thickness around my title and add a border after an image

I'm encountering difficulties when trying to replicate the style showcased in this image using CSS. My specific challenge lies in creating a yellow horizontal line above the title "nossos numeros" and blue vertical lines between "Cursos", "Alunos", an ...