CODEWITHSUNDEEP
javascript
Duffman
Duffman

Reputation: 95

Thoughts on why an array will not work

I am switching classes on the links on my project page, and the class change seems to work when only a single id is used, however when the array "myArray" is used, nothing happens. Curious if anyone has any thoughts why. Here is the code I am working with:

var oldpage = $("#oldpage");
var phpscript = $("#phpscript");
var db = $("#db");
var nypl = $("#nypl");
var ppt = $("#ppt");
var myArray = [nypl, db, ppt, phpscript, oldpage];
$(function() {
  var classes = ["paris", "chateau", "violin", "create", "museum"];
  var id = $(myArray);
  var count = 0;

  function nextClass() {
    id.addClass(classes[count = ++count % classes.length]);
    id.removeClass(classes[count = ++count % classes.length]);
    setTimeout(nextClass, 300);
  }
  setTimeout(nextClass, 300);
  id.addClass(classes[0]);
  id.removeClass(classes[0]);
  console.log(id);
});
.paris {
  color: pink;
}
.violin {
  color: rgb(134, 134, 134);
}
.museum {
  color: red;
}
.create {
  color: orange;
}
.chateau {
  color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="projects">
  <li><a href="http://web.simmons.edu/~duffp/lis489/indexver1.html" target="new" class="violin" id="oldpage">First iteration of this page</a>
  </li>
  <br />
  <li><a href="http://web.simmons.edu/~duffp/lis489/php/contactme.txt" target="new" id="phpscript" class="violin">PHP Mail script attached below.</a>
  </li>
  <br />
  <li><a href="http://web.simmons.edu/~duffp/lis489/Dufflibrary.php" target="new" id="db" class="violin">Searchable Database (In progress)</a>
  </li>
  <br />
  <li><a href="http://web.simmons.edu/~duffp/lis403/Duff_Song_Usability_ppt.ppt" target="new" id="nypl" class="violin">NYPL Usability Testing</a>
  </li>
  <br />
  <li><a href="http://web.simmons.edu/~duffp/lis403/Duff_Krim_Song_Evaluation_ppt.ppt" target="new" id="ppt" class="violin">Evaluation of Online Services</a>
  </li>
</ul>
</div>

Upvotes: -1

Views: 67

Answers (2)

Duffman
Duffman

Reputation: 95

I found that the add function worked beautifully.. Posting answer below :

$(function () {
var links = $("#oldpage").add("#phpscript").add("#db").add("#nypl").add("#ppt");
var classes = ["paris" , "chateau" , "violin" , "create" , "museum"];
var count = 0;
	function nextClass () {
		links.addClass(classes[count = ++count % classes.length]);
		links.removeClass(classes[count = ++count % classes.length]);
		setTimeout(nextClass, 30000);
		}
setTimeout(nextClass, 30000);
links.addClass(classes[0]);
links.removeClass(classes[0]);
console.log(links);
});

Upvotes: 0

taxicala
taxicala

Reputation: 21759

try this:

function nextClass() {
    for (var i = 0; i < myArr.length; i++) {
        myArr[i].addClass(classes[count = ++count % classes.length]);
        myArr[i].removeClass(classes[count = ++count % classes.length]);
        setTimeout(nextClass, 300);
    }
}

Upvotes: 1

Related Questions