Is it possible to adjust a single element within a class without affecting the rest using CSS?

Question

Is it possible to adjust a single element within a class without affecting the rest using CSS?

Currently, I am facing an issue where my jQuery and JavaScript code is affecting all instances of messageCase when I only want to target and expand one specific instance. How can I modify my code to achieve this without impacting every occurrence of messageCase?

Additionally, it's important to note that I am working under "use strict" conditions.

$(document).ready(function () {
    var aTag = $("div.messageCase").id();
    var divTarget = $("div.messageCase")

    $(document).click(function (e) {
        var target = $(e.target);
        if (target.is(aTag)) {
            if (divTarget.hasClass("messageCase")) {
                // divTarget.removeClass("messageCase");
                divTarget.addClass("messageCase messageCaseAnimation");
            }
        } else {
            divTarget.addClass("messageCase");
        }

        if (!target.is(divTarget))
        {
            $(divTarget).removeClass("B");
        }
    });

});

Thank you for your help!

javascript jquery css

Answer 1

Answer №1

Within your click function, you are assigning the clicked element to the variable target. This means you could simplify by doing the following:

target.addClass("messageCase messageCaseAnimation");

Here is a basic example of how this works within your code:

$(document).ready(function() {
  var divTarget = $("div.messageCase")

  $(document).click(function(e) {
    var target = $(e.target);
    target.addClass("messageCase messageCaseAnimation");
  });

});

Additionally, here is a complete demonstration:

$(document).ready(function() {
  var divTarget = $("div.messageCase")

  $(document).click(function(e) {
    var target = $(e.target);
    // Remove the messageCaseAnimation from all
    divTarget.removeClass('messageCaseAnimation');
    
    // Add the messageCaseAnimation to only the clicked
    target.addClass("messageCaseAnimation");
  
  });

})

.messageCaseAnimation {
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="messageCase">
  Case 1
</div>

<div class="messageCase">
  Case 2
</div>

<div class="messageCase">
  Case 3
</div>

<div class="messageCase">
  Case 4
</div>

Answer 2

Within your click function, you are assigning the clicked element to the variable target. This means you could simplify by doing the following:

target.addClass("messageCase messageCaseAnimation");

Here is a basic example of how this works within your code:

$(document).ready(function() {
  var divTarget = $("div.messageCase")

  $(document).click(function(e) {
    var target = $(e.target);
    target.addClass("messageCase messageCaseAnimation");
  });

});

Additionally, here is a complete demonstration:

$(document).ready(function() {
  var divTarget = $("div.messageCase")

  $(document).click(function(e) {
    var target = $(e.target);
    // Remove the messageCaseAnimation from all
    divTarget.removeClass('messageCaseAnimation');
    
    // Add the messageCaseAnimation to only the clicked
    target.addClass("messageCaseAnimation");
  
  });

})

.messageCaseAnimation {
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="messageCase">
  Case 1
</div>

<div class="messageCase">
  Case 2
</div>

<div class="messageCase">
  Case 3
</div>

<div class="messageCase">
  Case 4
</div>

Is it possible to adjust a single element within a class without affecting the rest using CSS?

Answer №1

Similar questions

Mastering jQuery ajax in Google Chrome Extensions

Show automatically created forms alongside each other within a v-for loop

Framework7: Reload the current page and add it to the page history stack

Use jQuery to retrieve query string values and then locate elements that correspond to those values

Looking for a way to integrate a Facebook feed (RSS) into your webpage? Try using this jQuery

Unable to execute and map the array promise of a POST request

intersectionObjects malfunctioning

Encounter a critical issue while making a JSON request using Kendo UI

Rails implementation of autocomplete feature using sleek and seamless jquery integration

A guide on adding specific rows together in a list

JavaScript used for making an AJAX request

Concealing anchor and span elements using CSS in Internet Explorer 7

Error in TypeScript when using Google Maps React with Next.js: there is a possibility that infoWindow.close is undefined

What is the procedure for invoking a function when the edit icon is clicked in an Angular application

Ways to parse a json document in vue.js

The export button in the React Material Table doesn't seem to be displaying correctly

Revamping Sign-out Design in AdminLTE with ASP.NET

Set the RegEx so that the entire match is non-capturing

Is there a parameter I am overlooking when trying to remove an item from a state-stored array using the delete button at line 55?

Having trouble incorporating symbols with functionalities using HTML, CSS, and JS