Styling for chosen or currently in use elements

Question

Styling for chosen or currently in use elements

Seeking assistance with creating a board using JavaScript and jQuery. The goal is for the user to select a cell (which adds an active class), then click on a different cell filled with a specific color, causing the original cell to fill in with the same color. Here is the relevant code:

http://jsfiddle.net/2J8yq/3/

var fillIn = $('.active_color_select')
$(red).click(function(){
 $(fillIn).css('background-color', 'red');
 });

** Suspecting an issue in this section

Upon testing, it was observed that after clicking an empty cell and selecting a color, the cell fills in correctly. However, choosing the next color results in all cells changing to the same color. Guidance is needed to ensure that only the selected cell receives the desired color without affecting other cells upon selection of a new color.

Your valuable input would be highly appreciated!

Thank you

jquery css

Answer 1

Answer №1

Let me show you how I would approach this:

$('.color').click(function(){
    var bgColor = $(this).attr('id');
    $('.active_color_select').css('background-color',bgColor);
});

UPDATE: Upon further reflection, Rick brings up a valid point. It might be more effective to extract the background color attribute directly from the clicked element, like so:

$('.color').click(function(){
    var bgColor = $(this).css('background-color');
    $('.active_color_select').css('background-color',bgColor);
});

Answer 2

Let me show you how I would approach this:

$('.color').click(function(){
    var bgColor = $(this).attr('id');
    $('.active_color_select').css('background-color',bgColor);
});

UPDATE: Upon further reflection, Rick brings up a valid point. It might be more effective to extract the background color attribute directly from the clicked element, like so:

$('.color').click(function(){
    var bgColor = $(this).css('background-color');
    $('.active_color_select').css('background-color',bgColor);
});

Answer 3

Answer №2

You've already made a query for that specific element using the selector.

fillIn.css('background-color', 'red');

The variable fillIn represents the jQuery object retrieved from your selector query ($('.active_color_select'))

So the entire code snippet would appear as follows:

var fillIn = $('.active_color_select')
$(red).click(function() {
    fillIn.css('background-color', 'red');
});

If you wish to apply this to a set of elements, you could simplify it by doing something like this:

<div class="fill-me-in" data-color="red"></div>
<div class="fill-me-in" data-color="green"></div>

This way, you can make it more generic with the following code:

$('.fill-me-in').click(function(e) {
    var me    = $(this),
        color = me.data('color');
    me.css('background-color', color);
});

Answer 4

You've already made a query for that specific element using the selector.

fillIn.css('background-color', 'red');

The variable fillIn represents the jQuery object retrieved from your selector query ($('.active_color_select'))

So the entire code snippet would appear as follows:

var fillIn = $('.active_color_select')
$(red).click(function() {
    fillIn.css('background-color', 'red');
});

If you wish to apply this to a set of elements, you could simplify it by doing something like this:

<div class="fill-me-in" data-color="red"></div>
<div class="fill-me-in" data-color="green"></div>

This way, you can make it more generic with the following code:

$('.fill-me-in').click(function(e) {
    var me    = $(this),
        color = me.data('color');
    me.css('background-color', color);
});

Answer 5

Answer №3

To change the color of only the td with class active_color_select, utilize $('.active_color_select') instead of $(fillIn):

$(red).click(function () {
    $('.active_color_select').css('background-color', 'red');
});

$(blue).click(function () {
    $('.active_color_select').css('background-color', 'blue');
});

$(green).click(function () {
    $('.active_color_select').css('background-color', 'green');
});

$(mint).click(function () {
    $('.active_color_select').css('background-color', '#9CBA7F');
});

$(white).click(function () {
    $('.active_color_select').css('background-color', 'white');
});

$(lightPurple).click(function () {
    $('.active_color_select').css('background-color', '#BF5FFF');
});

Furthermore, bear in mind that your variable is already a jQuery object, so there is no need to wrap it inside $() again.

For instance, you can use:

inactive.removeClass('active_color_select');

instead of:

$(inactive).removeClass('active_color_select');

The same principle should be applied to other variables.

View Updated Fiddle Here

Answer 6

To change the color of only the td with class active_color_select, utilize $('.active_color_select') instead of $(fillIn):

$(red).click(function () {
    $('.active_color_select').css('background-color', 'red');
});

$(blue).click(function () {
    $('.active_color_select').css('background-color', 'blue');
});

$(green).click(function () {
    $('.active_color_select').css('background-color', 'green');
});

$(mint).click(function () {
    $('.active_color_select').css('background-color', '#9CBA7F');
});

$(white).click(function () {
    $('.active_color_select').css('background-color', 'white');
});

$(lightPurple).click(function () {
    $('.active_color_select').css('background-color', '#BF5FFF');
});

Furthermore, bear in mind that your variable is already a jQuery object, so there is no need to wrap it inside $() again.

For instance, you can use:

inactive.removeClass('active_color_select');

instead of:

$(inactive).removeClass('active_color_select');

The same principle should be applied to other variables.

View Updated Fiddle Here

Answer 7

Answer №4

Make sure to remove all active classes from your click handlers and deactivate them:

 $(red).click(function(){
    $(fillIn).css('background-color', 'red');
    $('.active_color_select').removeClass('active_color_select');
  });

You don't need multiple variables, just simplify it like this:

 $('#red').click(function(){
    $('.active_color_select').css('background-color', 'red');
    $('.active_color_select').removeClass('active_color_select');
  });

You can chain the calls together for even cleaner code:

 $('#red').click(function(){
    $('.active_color_select').css('background-color', 'red')
                             .removeClass('active_color_select');
  });

Also, consider adjusting the extent of your initial click handler:

$('.inactive').click(function(){
      $('.active_color_select').removeClass('active_color_select');
      //optionally you could add inactive back to the above
      $(this).addClass('active_color_select');
      //optionally you can remove inactive from this
}) //close click handler here

Answer 8

Make sure to remove all active classes from your click handlers and deactivate them:

 $(red).click(function(){
    $(fillIn).css('background-color', 'red');
    $('.active_color_select').removeClass('active_color_select');
  });

You don't need multiple variables, just simplify it like this:

 $('#red').click(function(){
    $('.active_color_select').css('background-color', 'red');
    $('.active_color_select').removeClass('active_color_select');
  });

You can chain the calls together for even cleaner code:

 $('#red').click(function(){
    $('.active_color_select').css('background-color', 'red')
                             .removeClass('active_color_select');
  });

Also, consider adjusting the extent of your initial click handler:

$('.inactive').click(function(){
      $('.active_color_select').removeClass('active_color_select');
      //optionally you could add inactive back to the above
      $(this).addClass('active_color_select');
      //optionally you can remove inactive from this
}) //close click handler here

Answer 9

Answer №5

Check out this optimized code snippet that efficiently achieves the desired functionality: Optimized Code

// Select all fillable elements using a faster method than direct child selector
var fillableElements = $('#master').find('td');
var colorElements = $('#selection').find('.color');

// Variable to store currently selected elements
var selected = null;

// Using .on() for click events on dynamically added elements in the future
fillableElements.on('click', function() {
    var el = $(this);
    // Remove 'active_color_select' class from all other elements
    fillableElements.removeClass('active_color_select');
    // Add 'active_color_select' class to the clicked element
    el.addClass('active_color_select');    
    // Store the selected element
    selected = el;

});

colorElements.on('click', function() {
    var el = $(this);
    // Get background color of chosen color
    var color = el.css('background-color');
    // Apply the color to selected element
    selected.css('background-color', color);
});

Answer 10

Check out this optimized code snippet that efficiently achieves the desired functionality: Optimized Code

// Select all fillable elements using a faster method than direct child selector
var fillableElements = $('#master').find('td');
var colorElements = $('#selection').find('.color');

// Variable to store currently selected elements
var selected = null;

// Using .on() for click events on dynamically added elements in the future
fillableElements.on('click', function() {
    var el = $(this);
    // Remove 'active_color_select' class from all other elements
    fillableElements.removeClass('active_color_select');
    // Add 'active_color_select' class to the clicked element
    el.addClass('active_color_select');    
    // Store the selected element
    selected = el;

});

colorElements.on('click', function() {
    var el = $(this);
    // Get background color of chosen color
    var color = el.css('background-color');
    // Apply the color to selected element
    selected.css('background-color', color);
});

Styling for chosen or currently in use elements

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Retrieve the link's "href" attribute and its text if they match the specified text

How can I position two bootstrap tables side by side based on their columns

Mastering the Art of Utilizing content_for and Rendering Partials in Rails 4

Find the location of the div element but ignore any divs with a certain class

Toggling reverses multiple CSS keyframe animations

jQuery - Wait for the completion of one UI change before initiating another UI change

Manage the placement of elements using CSS

Toggle the display of slide numbers in RMarkdown xaringan / reveal.js presentations

How does Facebook access the new hashtags when they are clicked on?

Leverage the power of jQuery to display JSON data retrieved from a PHP

The dilemma with automated clicking in jQuery

Combining different HTML table borders

JQuery - ToggleMenu - 3 different menus nested under 3 separate div containers

What is the best way to continuously update a table row based on a database condition

Issue with binding the deepest level grid in a two-level deep Kendo Grid detail template

Is there a method, like using jQuery, to insert `<br>` tags into each line of a dropdown select list?

Looping the jQuery Ajax success function

Achieve the effect of "background-attachment: fixed" using a div element

Ensure that a bootstrap table's cell occupies the entire available space, while also allowing for scrolling when there is overflow

What causes the disappearance of connecting lines after pushing content into a tab?