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

What is the method to dynamically modify the value of location.href using vanilla javascript?

I have a button that looks like this: <button type="button" class="play-now-button" onclick="location.href='www.yahoo.com'">Play Now</button> However, I want to change the location.href value using vanilla JavaScript. The code below ...

javascripthtmldebugging

Issues with displaying search form div using jQuery AJAX

Currently, I am in the process of developing a search form that includes a dropdown menu. The functionality involves selecting an item from the dropdown menu triggering an AJAX call to another PHP file. This call returns tags which resize both the dropdown ...

phphtmljqueryajaxforms

Jquery Droppable issue arising with dynamically added DIVs

I am facing a similar issue as described in this question and this one I am trying to implement drag-and-drop and resize functionality. It is working fine for static elements, but I encounter issues when adding dynamic divs. The resize property works prop ...

javascriptjqueryhtmlcss

The Challenge of Referencing Javascript Files (including jQuery)

Previously, I had the following code snippet: <head> <script src="/Scripts/jquery-1.3.2.min.js" type="text/javascript"></script> <script type="text/javascript"> var optPrompt = "- Select One -"; var subCats ...

javascriptjqueryhtmlfilereference

Using the googleapis library within HTML is not permitted

I have been attempting to execute a simple function (uploadFile(test.txt)) within an HTML file, but I am encountering issues as my app.js and Google APIs are not being recognized or called. Node.js is throwing this error: Uncaught ReferenceError: uploadFi ...

javascripthtmlnode.jsrequirejs

Guide to creating a scrollable container that occupies the remaining height of the screen

Looking to create a fixed container that is scrollable, while keeping the rest of the page fixed? Check out this Stackblitz example. Here's a component called "PageDefault" that includes a Header and wraps each page in the application (the content of ...

cssreactjssass

AngularJS powered edit button for Laravel route parameter

I have a data list that needs to be edited using an edit button. When clicking the edit button, I need to send the ID to a Laravel controller in order to fetch the corresponding data. The initial listing was created using Angular JS. <a class="btn" hr ...

javascriptphpangularjslaravel-5.3

When using setState in the onRowSelection event with React's Material-ui tableRow, the selection cannot be properly controlled

Currently, I am working with a material-ui table https://i.stack.imgur.com/JIzLT.png and my goal is to pass selected rows to a function when the DELETE button is clicked. constructor(props) { super(props); this.state = { selecte ...

javascriptreactjsmaterial-designstate

Having difficulty in displaying database values in HTML modal using PHP

On my PHP page, I have a setup that displays data based on the fetched id from the URL. Everything is working smoothly, but when I click a button to show a modal with additional information, the modal appears blank. Here is the code snippet I am using: ...

javascriptphphtmlmysqlsql

Creating a CSV file using an AJAX request in PHP

In my current project involving PHP AJAX DATATABLE within the Drupal framework, I have successfully developed a function to create a CSV file from table records. This function is triggered by clicking a button in HTML or accessing a specific URL. The PHP ...

phpjqueryhtmlajaxcsv

Tips for shuffling the sequence of EJS variables

I am currently working on creating a quiz that consists of multiple choice questions. In order to display the Question, Correct Answer, and 3 other wrong options, I am utilizing EJS variables. The format will be similar to the following example: Question: ...

javascripthtmlnode.jssortingejs

How to perfectly center an element with a specified aspect ratio

I am experiencing a strange problem when attempting to center an element with aspect-ratio applied. I thought it would work similar to centering an image, but I keep getting stuck with an element of 0px x 0px. https://codepen.io/richardcool/pen/xxeKOwp I ...

htmlcssaspect-ratio

How to resize and center an image within a div element as they both scale proportionally

Can someone help me figure out how to center a resized image within its container, which should also be centered? I've been struggling with this for 7 hours and can't seem to get it right. Any assistance would be greatly appreciated :-) Here is ...

jquerycsshtmlresize

The success variable of the Ajax running continuously in a loop is not being refreshed

Within this code snippet, a for loop is utilized to iterate through an array called netnos[] and update the variable 'nets' for each item. Ajax is then invoked to call a PHP script that generates a listing, which is successfully outputted to the ...

javascriptjqueryajax

Tips for prioritizing new data input at the top of the list

Hey there, I'm having trouble figuring out how to push new data to the top of a list using vue.js and laravel. I've been trying but haven't had any luck so far. If anyone could lend a hand, I would greatly appreciate it. Below is my Control ...

javascriptlaravelvue.js

What is the process for updating parameters before finalizing a route in Vue.js?

I have set up a route with a value parameter: routes.push({ name: 'test', path: '/test/:value', component: resolve(__dirname, 'src/pages/test.vue'), }); Now, I want to modify the route so that it also include ...

javascriptvue.jsvue-routernuxt.js

The method for storing a user's choice in my array and subsequently selecting an element at random

Seeking assistance in developing a program that can play an audio list at various durations. The plan is to have the duration for elements 4 through 8 based on user selection, with the program playing each element within that range during the initial round ...

javascriptjqueryhtml

"Retrieve the position of a contenteditable element while also considering HTML

I've been exploring a method to generate annotations within HTML text using JavaScript. The approach involves the user clicking on a contenteditable <div> and obtaining the cursor's position based on their click. Subsequently, when insertin ...

javascripthtml

Experiencing a hiccup while attempting to query the Twitter API using Node.js

I am a beginner exploring the world of node.js, but I keep encountering a perplexing "write after end" error. Despite searching for solutions online, none seem to address my specific issue. My current project involves querying the Twitter API. req.on(&apo ...

javascriptnode.js

Using jQuery to toggle the visibility of divs depending on the selection of multiple checkboxes

I found this code snippet that I need help with. <div class="row"> <div class="col-xs-4"> <label class="checkbox-inline"><input type="checkbox" value="draft">Draft</label> </div> <div class="c ...

javascriptjqueryhtml