Javascript - switch with a parameter from an html class


#1

I am trying to help out a friend, and i'm still very very new to javascript just finished the course (and feel i may need to redo it just to fully take it in).

He is trying to make a roster of people, and wants special attributes to the <div>'s based on the class they are given, but they will have the same overall style. it will be subtle differences, color: etc. So my theory is to use some javascript instead of writing a ton of css code.

I think i have it down for the most part using a switch statement based on the class, and that switch statement would feed the function to change styles. The problem i'm running into is creating the variable based on the class in the html element.

Does anyone have any suggestions?

html code:

<div class="special1 overall_tab">
	<div class="img">
	</div>
	<div class="name">
		<p>Joe Smith</p>
	</div>
	<div class="role">
		<p>Role</p>
	</div>
</div>

javascript for the most part:



$(document).ready(function() {
	var $special = ??;

switch($special) {
	case special1:
	$('.name).css('color','red');
	break;
}
});

Thank you in advance!


#2

The ?? would be a class selector, in the form of an object. The case would have to be a string referring to this object, since there is no variable special1 to do it..

That's just a preliminary observation. There may be other things to discuss, presently, after I give this some more thought. Hopefully more insights will surface in the meantime.

Then there is the question of discreteness. What is $special really supposed to imply? With classes there is a lot to scope and I would guess we want something more unique (specific); correct?


#3

re-reading this i should have waited until morning to post, i see some issues already with the rest of the code already and will address them and re-post if needed. Although the same question persists.

I need to create a variable based on what class

has.

The .overall_tab is basically the constant styling of the whole div in the css, so width, height, background color etc... the .special1 is the code i need to make a dynamic variable out of, because one tab may have special1, and the next will have .special7, which will be my parameter for my switch statement.

RIght now i'm playing with the idea of creating an array of all the special* classes, then creating a for loop to loop through then === to the .class variable, then it will just return the result when it matches, therefor giving me my switch parameter. (i really hope that makes as much sense as it does in my head).

Thank you for your reply and help!