Modify css using jquery for multiple ids assigned to the same class

Question

Modify css using jquery for multiple ids assigned to the same class

I have a set of 3 divs all sharing the same class.

<div id="qq1" class="cl">sentence</div>
<div id="qq2" class="cl">sentence</div>
<div id="qq3" class="cl">sentence</div>

I am interested in finding out how to properly write code that will trigger a mouse event for these 3 divs with one function, targeting the 'cl' class and returning the appropriate ID for adjusting CSS properties. For example:

<script>
$('.cl').on('mouseenter', function() {
    var currentId = $(this).attr('id');
    $('#' + currentId).css("background-color", "#99cc33");
    $('#' + currentId).css("color", "white");
});
$('.cl').on('mouseleave', function() {
    var currentId = $(this).attr('id');
    $('#' + currentId).css("background-color", "white");
    $('#' + currentId).css("color", "#404040");
});
</script>

However, there seems to be an issue because it is not functioning as expected.

jquery css function

Answer 1

Answer №1

The variable currentId is not being used at all, instead a string containing the characters c, u, r, etc., 'currentId' is being attempted to be used.

If you want to use the actual variable value, you should write it as $('#' + currentId).css() - for example, if currentId is 'qq1', then you would effectively be saying $('#qq1').css().

However, in this scenario, you can skip using the id altogether by simply using $(this):

$('.cl').live('mouseenter', function() {
    $(this).css({"background-color" : "#99cc33",
                 "color" : "white"});
});

$('.cl').live('mouseleave', function() {
    $(this).css("background-color", "white");
    $(this).css("color", "#404040");
});

When working within a jQuery event handler, this refers to the DOM element itself, while $(this) creates a jQuery object representing that element and allowing you to apply jQuery methods on it. The .css() method accepts multiple properties in map form, enabling you to set them collectively with one call - this syntax is demonstrated in the mouseenter section but not in the mouseleave, so that you can make a comparison.

(Side note: unrelated to your question, but if you are utilizing jQuery 1.7 or later, it is recommended to discontinue the use of .live() as it has been deprecated in favor of .on() - guidance on converting your code is available on the .live() documentation page. If you are operating on versions less than 1.7 but greater than 1.4.2, consider switching to .delegate().)

Answer 2

The variable currentId is not being used at all, instead a string containing the characters c, u, r, etc., 'currentId' is being attempted to be used.

If you want to use the actual variable value, you should write it as $('#' + currentId).css() - for example, if currentId is 'qq1', then you would effectively be saying $('#qq1').css().

However, in this scenario, you can skip using the id altogether by simply using $(this):

$('.cl').live('mouseenter', function() {
    $(this).css({"background-color" : "#99cc33",
                 "color" : "white"});
});

$('.cl').live('mouseleave', function() {
    $(this).css("background-color", "white");
    $(this).css("color", "#404040");
});

When working within a jQuery event handler, this refers to the DOM element itself, while $(this) creates a jQuery object representing that element and allowing you to apply jQuery methods on it. The .css() method accepts multiple properties in map form, enabling you to set them collectively with one call - this syntax is demonstrated in the mouseenter section but not in the mouseleave, so that you can make a comparison.

(Side note: unrelated to your question, but if you are utilizing jQuery 1.7 or later, it is recommended to discontinue the use of .live() as it has been deprecated in favor of .on() - guidance on converting your code is available on the .live() documentation page. If you are operating on versions less than 1.7 but greater than 1.4.2, consider switching to .delegate().)

Answer 3

Answer №2

<script>
$('.cl').live('mouseenter', function() {
    var currentId = $(this).attr('id');
    $('#' + currentId).css("background-color", "#99cc33");
    $('#' + currentId).css("color", "white");
});
$('.cl').live('mouseleave', function() {
    var currentId = $(this).attr('id');
    $('#' + currentId).css("background-color", "white");
    $('#' + currentId).css("color", "#404040");
});
</script>

Make sure to remember to correctly access variables as strings within your jQuery code, using the # id selector and appending the variable for proper functionality.

Answer 4

<script>
$('.cl').live('mouseenter', function() {
    var currentId = $(this).attr('id');
    $('#' + currentId).css("background-color", "#99cc33");
    $('#' + currentId).css("color", "white");
});
$('.cl').live('mouseleave', function() {
    var currentId = $(this).attr('id');
    $('#' + currentId).css("background-color", "white");
    $('#' + currentId).css("color", "#404040");
});
</script>

Make sure to remember to correctly access variables as strings within your jQuery code, using the # id selector and appending the variable for proper functionality.

Answer 5

Answer №3

Instead of the original approach, consider implementing the following:

<script>
$('.cl').on('mouseenter', function() {
    $(this).css("background-color", "#99cc33");
    $(this).css("color", "white");
});
$('.cl').on('mouseleave', function() {
    var currentId = $(this).attr('id');
    $(this).css("background-color", "white");
    $(this).css("color", "#404040");
});
</script>

Answer 6

Instead of the original approach, consider implementing the following:

<script>
$('.cl').on('mouseenter', function() {
    $(this).css("background-color", "#99cc33");
    $(this).css("color", "white");
});
$('.cl').on('mouseleave', function() {
    var currentId = $(this).attr('id');
    $(this).css("background-color", "white");
    $(this).css("color", "#404040");
});
</script>

Answer 7

Answer №4

$(document).ready(function() {
  $('.cl').click(function() {
    var clickedId = $(this).attr('id');

    $("#"+clickedId).css();
  });
});

This code snippet provides a basic concept for handling click events in jQuery. The implementation details may vary depending on specific requirements.

Answer 8

$(document).ready(function() {
  $('.cl').click(function() {
    var clickedId = $(this).attr('id');

    $("#"+clickedId).css();
  });
});

This code snippet provides a basic concept for handling click events in jQuery. The implementation details may vary depending on specific requirements.

Modify css using jquery for multiple ids assigned to the same class

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Guide on programmatically choosing an option within a variable with the help of jQuery

In search of a highly efficient webservices tutorial that provides comprehensive instructions, yielding successful outcomes

Performing a function multiple times by clicking the mouse

The CSS popup box fails to reset its data after being closed, and the closure button does not effectively close the popup

The jQuery AJAX function encountered an error with the following details: "readyState" is 0, "responseText" is empty, "status" is 0, and "statusText" is "error"

Aligning images with absolute CSS to text that is wrapping positions the images perfectly alongside the text content

Update the notification header count in Yii2 without the need to reload the page, ensuring that notifications are automatically refreshed every

Refining to Showcase One Menu Selection

What is an alternative method for creating a horizontal line without the need for the <hr> tag?

Tips on adjusting video to the screen size

How can the text from the title tag be extracted and shown as on-page content in an HTML website? - WordPress

Issue with EventDrop and EventResize functionality in ROR4

Moving from one page to another

Loading dynamic fonts in React MaterialUI

Pausing for the completion of AJAX calls within a $.each loop before proceeding with the function execution

Skewed div with a stylish background image

Utilizing JSON Data with JQuery: A Beginner's Guide

A more efficient method for transforming HTML/CSS into images

Validate fields by iterating through an object and considering three data points for each field

Currently dealing with a script that utilizes AJAX GET to incorporate JSON data into my table