0

Seems like I'm stuck with jQuery selectors.

I would like to have one controller to change for instance css color value of colorsample element and html in value element. The page goes like this:

<span class="controller blue">██</span>
<span class="controller red">██</span>

<span class="colorsample red">██</span>
<span class="colorsample blue">██</span>

<span class="hexcolor red">#FF0000</span>
<span class="hexcolor blue">#0000FF</span>

The jQuery code... Well I don't have working one for this example because I'm stuck. The previous version of this page was generated with template engine, so each element had a unique name and for each controller I had a piece of JavaScript of its own, which worked just fine, but I thought it's stupid and having such double classes seemed to be a good idea to me, but now I can't wrap my head around selecting them, I'm trying something like:

$("span.control").click(function(){
get an element which has the same class as this one, but not entirely, goddamit!
});

So I think I'm doing something very wrong here, what's good approach to making such sort of page? I don't need the detailed code, just a general direction would be great.

Edit: I'd like to keep these ugly symbols, because the page is about pseudographical interfaces.

Roman Grazhdan
  • 467
  • 4
  • 15
  • Get the class name of the current element using `this.className` (this as DOM element, not jQuery). Then, split the string by consecutive whitespace (`\s+`), and join it using `,.`. Before doing so, you might want to strip out the irrelevant known class name (`"controller")`, for example. Then, use `$(string_so_far)` to select the desired elements. – Rob W Feb 24 '12 at 22:49

2 Answers2

1

Use this to get a list of classes, and find the controls that contain the one class that you're looking for.

After that you can get the color using a selector similar to $(".hexcolor ." + colorName).val(); and putting that into you elements' css.

Community
  • 1
  • 1
J. Ed
  • 6,692
  • 4
  • 39
  • 55
0

OK, just in this situation I did the following:

Class attribute defines element's function: controller is for calling the colorpicker widget, sample (I heave several different of these to show how color works in different contexts) is for showing how it looks and hexcolor is for showing RGB code of color for people to use in their configs.

Name attribute defines exactly which color needs to be changed with the controller, like so.

<span class="controller" name="red">██</span>
<span class="controller" name="blue">██</span>

<span class="colorsample" name="red">██</span>
<span class="colorsample" name="blue">██</span>

<span class="hexcolor" name="red">#FF0000</span>
<span class="hexcolor" name="blue">#0000FF</span>

So I do strings processing in JavaScript, but it's not array splitting, it's trivial concatenation, like so:

//getting name
var myName = $(this).attr("name"); 
//making a selector for sample
var sampleSelector = "\'span[class=\"sample\"][name=\"" + myName + "\"]\'";
//making a selector for hexcode
var hexColorSelector = "\'span[class=\"hexcolor\"][name=\"" + myName + "\"]\'";

These can be used in multiple attributes selectors later, here it is as an option for color selector widget:

onChange: function (hsb, hex, rgb) { //that's from widget docs
     $(sampleSelector).css('color', '#' + hex);
     $(hexColorSelector).html('#' + hex);
}

If it's not terribly wrong, I'd accept this. If it is, I'd rewrite the code and accept a correction with an explanation why.

Roman Grazhdan
  • 467
  • 4
  • 15