How do I change the class of an element using $this?

Please review the code below:

$(".nwe-cl-icontext").click(function () {
  $(this).parent().toggleClass("nwe-active");
})
.nwe-cl-c.nwe-active {
background: red;
}

.nwe-cl-c {
background: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="nwe-g-m">
    <div class="nwe-cl-c nwe-active">
        <div class="nwe-cl-icon-m is"></div>
        <div class="nwe-cl-icontext">btn3</div>
    </div>

    <div class="nwe-cl-c">
        <div class="nwe-cl-icon-m is"></div>
        <div class="nwe-cl-icontext">btn2</div>
    </div>

    <div class="nwe-cl-c">
        <div class="nwe-cl-icon-m is"></div>
        <div class="nwe-cl-icontext">btn3</div>
    </div>
</div>

Seeking assistance on achieving a specific functionality - when clicking the second button, the "nwe-class" should be added to the second parent element and so forth for subsequent buttons.

Answer №1

To choose the element that has the specific class, ensure it is different from the one you have just clicked on, and then eliminate that class.

$(".nwe-cl-icontext").click(function() {
  const selectedElement = $(this).parent();
  selectedElement.toggleClass("nwe-active");
  $('.nwe-active').not(selectedElement).removeClass("nwe-active");
})
.nwe-cl-c.nwe-active {
  background: red;
}

.nwe-cl-c {
  background: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="nwe-g-m">
  <div class="nwe-cl-c nwe-active">
    <div class="nwe-cl-icon-m is"></div>
    <div class="nwe-cl-icontext">btn3</div>
  </div>

  <div class="nwe-cl-c">
    <div class="nwe-cl-icon-m is"></div>
    <div class="nwe-cl-icontext">btn2</div>
  </div>

  <div class="nwe-cl-c">
    <div class="nwe-cl-icon-m is"></div>
    <div class="nwe-cl-icontext">btn3</div>
  </div>
</div>

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

Using jQuery to create live ajax requests and ensure they finish before moving on

I have a need to execute multiple ajax calls (the exact number varies) and wait for all of them to complete. My current approach is shown below: ajaxRequests = new Array(); ajaxRequests.push(function(){ return jQuery.post(url: "someUrl", ...

Tips for patiently waiting for a series of asynchronous calls to successfully complete

I have a scenario where I am dealing with multiple asynchronous calls that are dependent on each other's success. For example: function1 = () => { /*Some required Logic*/ return fetch("myurl") .then((json) => { functi ...

Switch the selected option in JQuery UI dropdown using a clickable button

I have a code snippet that is almost working. My goal is to change the selection of a JQuery dropdown select combobox using a separate button named "next". What I want is for the JQuery dropdown to automatically switch to the next selection every time I c ...

Is setting the height to 100% a dependable option for container loading during the initial page rendering in CSS?

Upon arrival on the page, I envision the container containing the "search" to expand and occupy the entire screen. Seems simple enough: just set the height to 100%. If the user chooses to scroll down, they will see the rest of the content. It almost fee ...

tap into adhesive, translucent screen

I designed a webpage with an iframe at the bottom that I set to be transparent so that overlapped elements are visible. However, I encountered an issue where the links beneath the iframe were not clickable unless I disabled pointer-events for the iframe. ...

The Double Trigger of Ajax Notifications

Can anyone help me figure out why the alert is firing twice? The code snippet involves a checkbox with the class .onoffswitch. <script type="text/javascript"> $(document).ready(function(){ $('.onoffswitch').click(function(){ ...

Working with double quotes within variable in JavaScript

I am currently working on dynamically creating HTML tags using JavaScript. Please take a look at the code snippet below: function getPhotosSuccess(data) { if (data.d.results.length > 0) { var response = data.d.results; var innerht ...

Utilizing JQuery for Asynchronous Post Requests in C#

Having some trouble retrieving a JSON Object in C#. I've posted my JavaScript code here, but I can't seem to handle it in the codebehind. Any tips or suggestions would be greatly appreciated! $.ajax({ type: "POST", url: "facebook ...

struggling to update an array with user inputs on my to-do list app

I'm currently in the process of creating a small to-do list with some specific functionality. I want each text input (or a copy of it) to be added to an empty string, ensuring that the original input remains unchanged. The goal is to have a function t ...

Is your 100% height not beginning at the top of the page?

The link provided showcases a tutorial that has a white column extending to the bottom of the browser. In this example, the white column begins from the very top, with a header in a different shade of grey covering it. In my scenario, I need the header to ...

Arrange a variety of images with different dimensions in a narrow row while keeping the width fixed and adjusting the height accordingly

Imagine you have a collection of 3 (or more) images, each with different sizes and aspect ratios, within a fixed-width div (for example width:100%): <div class="image-row"> <img src="1.png"> <img src="2.png"> <img src="3.png" ...

The jQuery scrollLeft function seems to be stuck and not working correctly

I have a container div with a ul inside of it set up like this CodePen: http://codepen.io/example/123 Why won't the scroll feature work? HTML: <div id="container"> <ul class="list"> <li>apple</li> <li>orange& ...

The webpage content is failing to display once the HTML document has finished loading

My goal is to load an advertisement after the page has loaded using jQuery's html() method. However, I am facing an issue where the $(document).ready(function(){ function is causing a redirect, displaying only the advertisement without any other data. ...

What is the function of typekit.com and how does it utilize @font-face technology

What is the functionality of typekit.com? Several websites similar to typekit enable CSS designers to utilize custom fonts, but how does it work? Is it possible for me to create a site like typekit myself? What technologies are involved in this process? A ...

Retrieve data from a form on the server side using an Ajax request

I am currently working on submitting form data through an Ajax call. Here is the relevant form code: <form target="_blank" id="addCaseForm" class="form-horizontal col-md-12" action="" method="POST> <div class="form-group"> <labe ...

Is it possible to host three separate web pages within a single Firebase project on Firebase Hosting?

Imagine I have set up a project called ExampleApp on Firebase. I've designed a page with a form for users to submit data, hosted by Firebase. The Cloud Firestore database is storing this submitted data when the user completes the form and hits submit ...

The Jquery script is ineffective for newly added elements

After creating an Ajax Form that functions well, I noticed that when the result of the form is another form, my script does not work for the new form generated. Is there a way to make the new form function like the old one? $(document).ready(function() ...

Adding multiple text as label and sublabel in a React MUI Tooltip can be achieved by utilizing the appropriate

I'm struggling to incorporate a MaterialUI Tooltip into my React application with two separate text lines. The first line should serve as the main title, while the second line functions as a sublabel. In this screenshot provided, you can see where I ...

Template for PHP website including code

I am working on integrating this code into my index.php page in order to streamline the process of creating separate pages for my website using only simple HTML files. For instance: Instead of repeating the same template code on multiple pages like index, ...

Utilizing iPad, Safari, and CSS to effortlessly fill a page with flexbox properties

Trying to create a flex layout that expands the main area to fill the entire height of the display, with a footer always at the bottom when the content is small. However, if the main content exceeds the display size, it should behave like a normal page and ...