Reputation: 951
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:
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
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
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
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
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.
Upvotes: 1
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