array logical toggle teaser

This site is best viewed in a modern browser with JavaScript enabled.

arfa

I have a set of tiles and want to toggle their colour onclick
My classes are simply .a .b etc.

var colorOld = ['a','b','c','d','e','f','g','h','i','j'];
var colorNew = ['j','i','h','g','f','e','d','c','b','a'];

$.each(colorOld, function(index, value) { $('.'+value).toggleClass(colorNew[index]); });

The obvious bug is start a>j then j>a at end. Ditto e>f>e
I confess logic is not my strength and I can't see what's wrong but, from an aesthetic point of view the mix just looks yuk.
If you want to play about here is my minified class sample:

<style>.a {background-color:#F00}.b {background-color:#F80}.c {background-color:#FF0}.d {background-color:#0F0}.e {background-color:#0F8}.f {background-color:#0FF}.g {background-color:#08F}.h {background-color:#00F}.i {background-color:#F0F}.j {background-color:#F08}TD {width:10%;height: 111px;text-align:center;font-family:sans-serif}</style><table width=70%><TR><TD class=a>A</TD><TD class=b>B</TD><TD class=c>C</TD><TD class=d>D</TD><TD class=e>E</TD><TD class=f>F</TD><TD class=g>G</TD><TD class=h>H</TD><TD class=i>I</TD><TD class=j>J</TD></TR></table>

The basic code works I am just trying for a bit more colour pizzazz mix.

holyhttp

If the elements of your arrays colorOld and colorNew represent CSS class names then everything should be working just fine.
The "each" function is for DOM looping.
YOu can simply using a "for" loop:

var n=colorOld.length,
m=colorNew.length;
for(var i=0; i<n; i++){
if(n<=m){
$('.'+colorOld).toggleClass(colorNew);
}
}

JMRKER

From your initial description, I'm not sure what the purpose of the loop is.
Typically toggle means to swap states back and forth.

Based on that analysis, this is my solution to your problem without the use of classes.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />

<title> Untitled </title>

<style>
 #divWrapper div { width:7%; height:111px; text-align:center; font-family:sans-serif; float:left; }
</style>

</head>
<body>
 <div id="divWrapper">
  <div id="a">A</div>
  <div id="b">B</div>
  <div id="c">C</div>
  <div id="d">D</div>
  <div id="e">E</div>
  <div id="f">F</div>
  <div id="g">G</div>
  <div id="h">H</div>
  <div id="i">I</div>
  <div id="j">J</div>
 </div>

<script type="text/javascript">
// Modified from: http://www.webdeveloper.com/forum/showthread.php?283055-array-logical-toggle-teaser

var colorOld = ['#F00','#F80','#FF0','#0F0','#0F8','#0FF','#08F','#00F','#F0F','#F08'];
var colorIDSold = 'abcdefghij';
var colorIDSnew = 'jihgfedcba';

function toggleColor(oID) {
  var oIDptr = colorIDSold.indexOf(oID);      // get current ID pointer
  var nID = colorIDSnew[oIDptr];              // form new ID

// swap colors
  var ccolor = document.getElementById(oID).style.backgroundColor;
  var ncolor = document.getElementById(nID).style.backgroundColor;
  document.getElementById(oID).style.backgroundColor = ncolor;
  document.getElementById(nID).style.backgroundColor = ccolor;
}

window.onload = function() {
  var sel = document.getElementById('divWrapper').getElementsByTagName('div');
  for (var i=0; i<sel.length; i++) {
    sel[i].onclick = function() { toggleColor(this.id); } 
    sel[i].style.backgroundColor = colorOld[i];
  }
}
</script>

</body>
</html>

JMRKER

Avoid cross-posting to other forums as you may get conflicting answers...
See: http://www.codingforums.com/showthread.php?p=1354153#post1354153

arfa

@JMRKER
thanks for the long reply - especially considering my 'transgression' [grin]
I should have been more clear. The aim is to change colour on all color-divs on clicking another div

@holyhttp

then everything should be working just fine.
Yes, correct. I am sorry if I wasn't more clear. My last line above...
"The basic code works I am just trying for a bit more colour pizzazz mix. "

The question is one of logic - "I confess logic is not my strength..."

How to click one dixX and have the colour change in ALL color-divs - likely 50 to 100

Just to give you the scenario- using jquery Masonry Isotope. Building a language dictionary. The literal case here is toggling between English and x-language to give a colour change for all current word definition tiles.
We have:

$("#toggleLang").click(function () {
$.each(colorOld, function(index, value) { $('.'+value).toggleClass(colorNew[index]); });
... }

Language... and me with this pain in all the diodes down my left side

any logic help appreciated.

JMRKER

arfa;1285171 wrote:
@JMRKER
thanks for the long reply - especially considering my 'transgression' [grin]
I should have been more clear. The aim is to change colour on all color-divs on clicking another div
...

So how are ALL colors to change?
Do the colors rotate in sequence? Forward or backward?
Are the new colors to be randomly assigned?

My guess was to swap the colors for the DIV selected with the opposite box in the delay sequence. What is/was your original intent?

arfa

Thanks for persisting.

Not so much how the colours change - sequence, random, etc. - but that they go from one colour to a different colour. The change is purely a user indication of mode-shift; English>LangX>English. Just a visual cue. It doesn't even have to be a consistent change back and forth. For sure I've a more design brain than code cortex.

The 'problem' with my loop is that it just swaps, and makes no allowance for duplicates. The result is an unbalanced mix.

as per my original post.

var colorOld = ['a','b','c','d','e','f','g','h','i','j'];
var colorNew = ['j','i','h','g','f','e','d','c','b','a'];

a goes to j
then, at end, (new) j goes back to a - plus original j goes to a
Ditto e>f>e

I have tried various array mixes but -clearly haven't found a happy balance. I imagine that there is some (simple?) way to be sure that each original color becomes an exclusively new color. As the word-tiles will be initially randomly assigned class (and then sorted, split by group, etc.) there is no way of totally insuring that two adjacent tiles aren't the same. C'est la vie.

I hope this makes it more clear?

JMRKER

arfa;1285181 wrote:
Thanks for persisting.
...
I hope this makes it more clear?

Not really, but I'll try once again... :eek:

Based upon your assignments of:

var colorOld = ['a','b','c','d','e','f','g','h','i','j'];
var colorNew = ['j','i','h','g','f','e','d','c','b','a'];

Each of the following are questions about your logic needs...
1. When you click the first box color 'a' you want it to change to box color 'j'?
2. When you click the first box AGAIN, you want it to change back to box color 'a'?
3. What is to happen if you do #1 and then click the ('j'?) changed box? Does it change to 'a' or 'j'?

Randomly assigning the initial display, colorOld, is not a problem,
but it might effect the second array, colorNew,
if it too is a random match to the assignment from the colorOld array.

So are the arrays colorOld and colorNew linked when randomized or are they independent variables?

I can guess you needs all night, but it would be much faster if you would specify your design requirement.
Specifically set up a click sequence that would give you the changes you require so we can see what should happen
when you perform a pre-determined sequence of DIV box clicks.
What you have specified in your postings does not make sense to me, hence the repeated requests for clarification!

arfa

Yes, an example could have saved 1000 words.
colorToggle.html
Click 'English' and the tiles change - using my current swap routine:

$.each(colorOld, function(index, value) { $('.'+value).toggleClass(colorNew[index]); });

1st click = 2 pinks and a predominance of blues.
2nd click gives little change.
3rd click is back to original.

JMRKER

OK, I assume the 1st, 2nd and 3rd click you are talking about is on the word 'English'.
I see that effect on the color boxes.
Works fine as is in the link.

So now what do you want to change? What is supposed to happen after the above. Why is what you have not what you want?

arfa

Yes, your assumption about my statement "Click 'English' and the tiles change.. " in my previous post is correct.

My post: 08-26-2013, 07:39 PM and again Yesterday 07:50 PM ...

a goes to j
then, at end, (new) j goes back to a - plus original j goes to a
Ditto e>f>e

So, 1st click [on 'English'] = 2 pinks and a predominance of blues.
There is duplication - non-variance.

My post: Yesterday 07:50 PM...

I imagine that there is some (simple?) way to be sure that each original color becomes an exclusively new color.

getting there...