css color heirarchy?

[ghost]

Seems that some colors in css are more equal than others.

Here's my code with a .lime example. The grid is populated with eight colors, and this setup removes .lime from the lime cards, and therefore those cards turn white (attribute in .white). However, when I click on other squares, one of two things happens: 1) some colors now have three classes (.card .INITIALCOLOR, .lime) and the card displays lime. 2) some colors now have three classes (.card .INITIALCOLOR, .lime) and the card displays color in .INITIALCOLOR

$('.card').on('click', flipCard)

function flipCard(evt){
  console.log('card clicked')
  //add toggle from white to color for indiv cards
  $(this).toggleClass('lime')
}
var conCards=
    [$('#grid').children().eq(0).addClass('blue'),
     $('#grid').children().eq(1).addClass('red'),
     $('#grid').children().eq(2).addClass('green'),
     $('#grid').children().eq(3).addClass('orange'),
     $('#grid').children().eq(4).addClass('blue'),
     $('#grid').children().eq(5).addClass('lime'),
     $('#grid').children().eq(6).addClass('olive'),
     $('#grid').children().eq(7).addClass('brown'),
     $('#grid').children().eq(8).addClass('tan'),
     $('#grid').children().eq(9).addClass('orange'),
     $('#grid').children().eq(10).addClass('tan'),
     $('#grid').children().eq(11).addClass('red'),
     $('#grid').children().eq(12).addClass('lime'),
     $('#grid').children().eq(13).addClass('green'),
     $('#grid').children().eq(14).addClass('brown'),
     $('#grid').children().eq(15).addClass('olive'),]

[RobertAKARobin]

Instead of using classes for all of the colors, it may be a better bet to just change the CSS directly:

// in place of toggleClass
$(this).css('background-color', 'transparent')
// in place of addClass
$('#grid').children().eq(1).css('background-color', 'red')

[ghost]

I've gone back and forth on using that. I think I'm probably asking a peripheral question;

I think the real issue is getting the toggle to work; I think I need to set up a function that removes the particular color class so I'm left with the .white class attributes when I click a card, right?

On Mon, Oct 26, 2015 at 5:10 PM, Robert Thomas notifications@github.com wrote:

Instead of using classes for all of the colors, it may be a better bet to just change the CSS directly:

$('#grid').children().eq(1).css('background-color', 'red')

— Reply to this email directly or view it on GitHub https://github.com/ga-dc/project1/issues/168#issuecomment-151285920.

[RobertAKARobin]

That sounds like way too much work! I'd really just change the CSS directly.

Also, are you putting commas in your classes? <div class="foo, bar, baz"> is incorrect. It should just be spaces.

[RobertAKARobin]

Remember that all toggleClass does is look at an element and remove the class if it has it, and add it if it doesn't.

For example:

Example 1

HTML

<div></div>

JS

$("div").toggleClass("hello");

becomes...

<div class="hello"></div>

---

Example 2

HTML

<div class="goodbye"></div>

JS

$("div").toggleClass("hello");

becomes...

<div class="goodbye hello"></div>

---

Example 3

HTML

<div class="goodbye hello"></div>

JS

$("div").toggleClass("hello");

becomes...

<div class="goodbye"></div>

---

[ghost]

just reread this again and see you're suggesting i 86 the toggleClass function altogether for another route. going to try that.

[RobertAKARobin]

Yawp.