user3007294
user3007294

Reputation: 951

CSS for selected / active elements

I am quite new to javascript and jquery. I am trying to create a board in which the user selects a cell (which adds an active class), then clicks a different cell filled with a certain color. The original cell then fills in with the same color. Here is my jsfiddle:

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

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

** I believe the problem lies here

As you will see, when you click an empty cell and then click the color, the cell fills in, but then the next color selected changes all the cells to the same color. I am not sure how to get the selected cell to have the desired color without having it switch when the next cell is selected.

Any input at all would be greatly appreciated!

Thanks

Upvotes: 1

Views: 115

Answers (5)

Jason Fingar
Jason Fingar

Reputation: 3368

Here's how I would write this:

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

EDIT: Actually, Rick makes a good point. Maybe it would be better to grab the bg-color attribute from your current click target, like this:

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

Upvotes: 2

Rick Lancee
Rick Lancee

Reputation: 1659

Here's some working code, that does what you want but, a bit more efficiently :) http://jsfiddle.net/2J8yq/9/

// Get the fillable elements. $(selector).find() is faster than $(selector > selector)
// http://stackoverflow.com/questions/8929951/jquery-selector-why-is-id-findp-faster-than-id-p
var fillableElements = $('#master').find('td');
var colorElements = $('#selection').find('.color');

// A var for storing the currently selected elements
var selected = null;

// We use .on() if you are adding dynamic elements in the future, else click events won't fire.
// https://api.jquery.com/on/
fillableElements.on('click', function() {
    var el = $(this);
    // Remove from all other elements the selected class
    fillableElements.removeClass('active_color_select');
    // Add the selected class to the element
    el.addClass('active_color_select');    
    // Assign the selected value
    selected = el;

});

colorElements.on('click', function() {
    var el = $(this);
    // Get the bg color from the chosen color
    var color = el.css('background-color');
    // Add the color
    selected.css('background-color', color);
});

Upvotes: 1

DrLivingston
DrLivingston

Reputation: 818

On all your click handlers you need to then remove all the active classes and make them inactive again:

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

Also you don't need all those variables just do:

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

you can also chain the calls:

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

edit, your initial click hander has too big of an extent too:

$('.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 

Upvotes: 1

Felix
Felix

Reputation: 38112

You need to use $('.active_color_select') instead of $(fillIn) to change the color of only the td with class active_color_select:

$(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');
});

Also note that all of your variable is already a jQuery object. You don't need to wrap it inside $() again.

For example, you can use:

inactive.removeClass('active_color_select'); 

instead of:

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

The same way should be applied for other variables.

Updated Fiddle

Upvotes: 1

Yes Barry
Yes Barry

Reputation: 9876

You already queried for that element using the selector.

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

fillIn is a variable that represents that jQuery object returned from your selector query ($('.active_color_select'))

So the whole thing would look like:

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

If you want to apply that to set of elements it might be easier to do something like this:

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

Then you could make it more generic like:

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

Upvotes: 1

Related Questions