What is the best way to enhance the class following this condition in JavaScript?

Initially, the original script worked perfectly with just one class being added:

    function check_btn_charge() {
        if (parseInt(jQuery(".total-change-price").text()) >= 0) {
            jQuery(".btn-action-save-charge"+" "+"btn-danger").prop("disabled", true);
        }
        else {
            jQuery(".btn-action-save-charge"+" "+"btn-danger").prop("disabled", false);   
        }
    }

However, when trying to add more classes by using a plus (+) sign and space character to separate them in the condition as shown below, it did not work as expected:

    function check_btn_charge() {
        if (parseInt(jQuery(".total-change-price").text()) >= 0) {
            jQuery(".btn-action-save-charge").prop("disabled", true);
        }
        else {
            jQuery(".btn-action-save-charge").prop("disabled", false);   
        }
    }

What adjustments should be made to this script to ensure proper functionality?

javascriptjquerycssclass

Answer №1

To target an element that has both the classes 'myClass1' and 'myClass2', you can use:

jQuery('.myClass1.myClass2')

If you want to select elements with either of the classes 'myClass1' or 'myClass2':

jQuery('.myClass1, .myClass2')

The same concept applies for selecting elements with more than two classes.

Learn more

Answer №2

For those who prefer raw JavaScript over jQuery, here is an alternative solution:

const andElements = document.querySelectorAll(".one.two");
const orElements = document.querySelectorAll(".one, .two");
const xorElements= document.querySelectorAll(".one:not(.two), .two:not(.one)");
const norElements = document.querySelectorAll("button:not(.one):not(.two)");

View it in action on JSFiddle

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

Transitioning the CSS background for a lightbox display

I am currently experimenting with creating an image that fades in along with its background when clicked using the :target selector. (Similar to Lightbox: , but done purely with CSS). Here is the HTML: <a href="#firstimg"><img src="img/thumb-3.j ...

htmlcss

Customized content is delivered to every client in real-time through Meteor

I am currently working on creating a multiplayer snake game using three.js and meteor. So far, it allows one player to control one out of the three snakes available. However, there is an issue where players cannot see each other's movements on their s ...

javascripthtmlmeteorthree.jssynchronization

Why does the socket.io output only appear after I refresh the page?

Feeling stuck and seeking guidance. After following tutorials, I was able to develop a basic user registration/login app in nodejs/express with the addition of a socket.io chat feature. Upon user login, they are directed to the real-time chat page where i ...

javascriptnode.jsexpresssocket.ioundefined

Submit Form automatically, receive XML on following page, then automatically submit new form with XML information

Hello everyone, I may have approached this problem the wrong way, so any advice is much appreciated. Currently, I have a form that collects user input, formats it into XML, inserts that XML into a textarea, and then submits it automatically using document ...

jqueryajaxformsform-submit

The Laravel function is not returning as expected on the server

I'm facing an issue with my Laravel project. When the validator fails, the return back function works fine on localhost but on the server it redirects to the root URL. Can anyone help me resolve this problem? Here is my controller code: public functi ...

javascriptphplaravel

Encountering a 404 error for core.js and browser.js while loading an Angular 2 app through system.src.js

I am new to Angular2 and have followed the Angular2 quickstart and tutorial to get started. Just to provide some context, when a user clicks on a link in the top navigation bar of my webapp, it triggers a server side request. The resulting page returned t ...

javascriptnode.jstypescriptangular

Combine words into lowercase in JavaScript variable

I'm struggling to understand why the data from a form field input is not being stored correctly in a SharePoint column data collection. Currently, when someone inputs a name into a form field, it should automatically populate a SharePoint list: This ...

javascriptjqueryhtmltwitter-bootstrapjavascript-objects

What sets apart the "+" and "~" selectors in CSS?

I've tried using both of these selectors, but I'm having trouble distinguishing between them. It appears that they are functioning in the same way. There must be a difference that I'm overlooking. ...

css

Converting a timestamp from PHP in JSON format to date and time using JavaScript

Within the JSON file, there is a timestamp associated with each user login. An example of this timestamp is: timestamp: "1541404800" What steps should be taken to convert this timestamp into date and time format? ...

javascriptjson

Creating elements with HTML using .createElement()

My goal is to use .createElement() from the wp.element to insert HTML, however it appears as text instead. Here's an example: wp.element.createElement( Meta, { className: 'TEST', title: 'TEST& ...

javascriptreactjs

I have been struggling to upload a file to PHP using AJAX. I can't seem to get it to work

My code is designed to retrieve image details when an image is selected by browsing. (function () { var input = document.getElementById("uploaded_file"); formdata = false; alert("s"); formdata = new FormData(); input.addEventListener("cha ...

phpjqueryajax

Leveraging jQuery functions with dynamically generated DOM elements in JavaScript

On my website, I have a button that dynamically generates a dropdown menu, a textfield, and two buttons when clicked. The purpose of the textfield is to track the quantity selected, while the two buttons allow users to increase or decrease the value by 1. ...

javascriptjqueryhtml

Updating the original form upon hiding the popover within the Bootstrap framework

I am currently working on a form that is located inside a bootstrap popover. You can find a demo of the setup here: http://jsfiddle.net/BcczZ/185/ <div class="settings" data-toggle="popover" data-mysettings="#someid" data-original-title="Settings"> ...

jquerytwitter-bootstrap-3

Error in main thread: org.openqa.selenium.WebDriverException - $ is not defined

Acquiring a CSS selector by ID is resulting in an error when I invoke the getCSS method: UpdateActualPath actualPath= new UpdateActualPath(); actualPath.getCSS("https://www.google.co.in/", "a"); This is the code snippet: import java.io.IOException; ...

javajqueryseleniumjquery-selectors

How to ensure a div within an anchor tag occupies the full width in HTML and CSS?

In my code, I am working on creating multiple small boxes with images and centered text inside. The goal is to have these boxes clickable, where clicking the image will take you to a specific link. On desktop, I want a hover effect that darkens the image b ...

javascriptjqueryhtmlcss

Detecting the click area within a window using JavaScript to automatically close an element

Hello everyone, I am currently working on implementing a JavaScript code that is commonly used to detect click areas for closing an element such as a side navigation or a floating division when the user clicks outside of the element. The functionality wo ...

javascripthtml

Developing a way to make vue-custom-element compatible for embedding in external websites

I've been exploring ways to use a component from my Vue website on another site by embedding it in HTML. I came across https://github.com/karol-f/vue-custom-element and found this helpful guide. After installing the npm packages vue-custom-element an ...

javascriptvue.jswebpack

Encountering an issue of duplicate key error when using multiple v-for loops with various keys

I've encountered an issue while working on a Python application that utilizes Vue.js. A ticket came my way with an error message stating: [Vue warn]: Duplicate keys detected: ''. This may cause an update error. (found in Root) The pro ...

javascriptvue.jsvuejs2

Function cannot be executed through the onchange event handler

I am looking for a solution to track changes in the color of an option element and automatically change the color of the select element when an inactive environment is selected. For example, I want to mark inactive environments with the color #D4D4D4. Is t ...

javascriptjqueryangularjs

Troubleshooting in Electron: What is the best way to access objects within the render scope from the console?

During my experience in web development, I have always appreciated the ability to access and manipulate variables and functions through the browser's development console at runtime. For instance, if I define a var foo = 3; in my code, I am able to ...

javascriptnode.jsdebuggingelectron