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

<use> - SVG: Circles with different stroke properties

Why is the stroke of both <use> elements being ignored here? The stroke color of <circle> is set to blue, which is also appearing on both <use> elements. Why? I am trying to set different stroke colors for all three of these elements, bu ...

Every time I attempt to send Ajax jQuery parameters in a POST request with MVC 5, I am met with receiving NULL values

When attempting to send the subscriberemail parameter to the action result in the controller using AJAX jQuery parameters, I am consistently receiving a null value. Here is the code snippet: $("#button-subscribe-newsletter").click(function () { debug ...

The issue of Jquery not functioning properly within Ajax-included HTML documents

I've tried looking at some other posts, but I couldn't understand them. The jQuery works fine when the page is loaded, but when the same elements are loaded from an AJAX script, the jQuery doesn't work. I know I need to do a callback, but ca ...

Enhance Your Website with Bootstrap 3.0 Affix

Looking to attach a right hand column to the top of the window as you scroll using Bootstrap 3.0 and 'affix' feature. Here is the HTML for the element: <div class="col-lg-4 right-hand-bar" data-spy="affix" data-offset-top="477"> This is ...

Tips for populating a row in the Bootstrap grid with the assistance of the mr or ml classes

I've come across a roadblock here. The issue arises when attempting to fill the Bootstrap row while also utilizing mr (or ml). Initially, I attempted to calculate the numbers so that they add up to 12. In my 3-column layout, I have a column of 5, fol ...

What is the best way to combine two JavaScript functions into a single function, especially when the selector and function to be invoked may differ?

In the provided snippet, I am using the following function callers: // del if ( maxDelivery > 0 ) { if ( maxDelivery === 1 ){ delAdressFunc( dels ); } else { for ( i = 0; i < maxDelivery; i += 1 ){ delAdressFunc( ...

"A problem with PrimeNG where the model value does not get updated for the p-auto

<p-autoComplete [style]="{'width':'100%'}" name="searchSuggestions" [(ngModel)]="suggestion" (completeMethod)="searchSuggestions($event)" [suggestions]="searchSuggestionsResult" field="field"></p-autoComplete> Utilizing t ...

Is it possible to direct the focus to a specific HTML element when the tab key is pressed?

Seeking a solution to shift focus to a button once the user presses the tab key from the currently selected control, while bypassing other dynamic controls in between. The order of controls is as follows: <dynamic drop down control 1> <dynamic d ...

Ways to verify if a web URL is contained within an HTML textbox

In the process of developing a frontend form for WordPress, I have incorporated a basic HTML textbox for users to input a web URL. My goal now is to ensure that the entered value is indeed a valid URL and not just arbitrary text. Is there a way to perfor ...

The Ajax request is exceeding its limits

$(function(){ var imgClass = $('.caruselWrap').find('img'); imgClass.eq(1).addClass('pro'); var hasPro = $('.caruselWrap').find('img.pro'); var count = 3; // "position" of images, security for not breakin ...

Exploring Laravel 4: Controlling AJAX data manipulation via the controller

I am a beginner in using Laravel and ajax. Currently, I am working on retrieving data from a form through ajax and calling a controller method using ajax as well. The controller method searches the database and returns a json response to be handled by ajax ...

Pair of Javascript Functions Using Async with Parameters

This question builds upon a previous inquiry raised on Stack Overflow: When considering approach number 3 (referred to as the "counter" method), how can we ensure that the function handleCompletion can access necessary data from startOtherAsync to perform ...

Retrieving data from a dynamic table by utilizing variables

After some testing, I came across a way to select rows from a dynamic table within the range of 2 and 5: var limitTable = $(table).find('tr:gt(2):lt(5)'); However, attempting to use variables in place of hardcoded values doesn't seem to wo ...

"Enhancing JqGrid functionality with inline editing and custom formatters

I'm currently working with a column model that looks like this: { name: 'CostShare', index: 'CostShare', width: 50, formatter: 'number', formatoptions: { decimalPlaces: 2, suffix: "%" }, resizeable: true, align: 'ce ...

Having trouble displaying an image using output buffering in PHP and HTML, only to end up with a broken image

I've been working on a script that combines two PNG images - one as a watermark and the other as the source image. The idea is to blend these images together using the imagecopy function and display the result in the browser. However, despite my effor ...

Noticed a peculiar outcome when working with hexadecimal calculations in LESS. What could be causing this phenomenon?

I recently dove into the world of LESS and have found it to be quite interesting. However, I encountered a unique situation where a background color was assigned the code #03A9F4 - 100. Based on my limited knowledge of hexadecimal numbers from some IT clas ...

Transforming Unicode escape sequences into symbols and displaying them in a DOM element

Using the latest versions of Firefox and Chrome with jQuery 1.x edge. When an ajax request returns a single line of minified JSON text like this: { "fromSymbol": "\\u04b0", "toCurrency": "AUD", "toSymbol": "\\u0024", "convFact ...

The JavaScript calculator fails to display the value of buttons on the screen when they are pressed

I was attempting to create a calculator using JavaScript, but when I click on any button, nothing happens (the buttons don't display their values on the calculator's screen). My text editor (vs code) didn't indicate any errors, but upon insp ...

CSS - Combining underline, striikethrough, and overline effects with customized styles and colors within a single element

I am trying to achieve a unique design with only one <span> that has three different text decorations (underline, strikethrough, and overline) like this: (This is just an example, I need it to be changeable) https://i.stack.imgur.com/61ZnQ.png Ho ...

Abort an ajax request if it is taking too long to finish

On my website, I have implemented a search feature that queries my database using Ajax and displays the results in a modal box upon successful completion. The modal is then shown once the results are loaded. My backend is powered by Django. Is there a me ...