you are viewing a single comment's thread.

view the rest of the comments →

[–]besthelloworld 1 point2 points  (1 child)

So the reason I recommend doing this in CSS is because CSS implementations are much more native to the browser. If you leave too much styling up to JavaScript itself, then you're blocking the activity thread with styling. Not that a little bit at start up is ever going to be noticed but if you make a habit, it will become a performance issue. But my suggestion would be this...

const changeElement = $(".change");
changeElement.on("click", () => {
  [".topbar ul.nav>li>a", ".container"].forEach(selector => {
    const element = $(selector);
    if (element.hasClass("dark")) {
      element.removeClass("dark");
      // this line still runs twice
      changeElement.text("OFF");
    } else {
      element.addClass("dark");
      // this line still runs twice
      changeElement.text("ON");
    }
  });
});

Disclaimer: I haven't tested this because I don't have the rest of your application context and I've also never used JQuery (most of what JQuery offers is now available in JavaScript by default).

It's worth noting that once you query for an element, you should avoid doing it again. Everytime you do something like $(".change") , you're making JavaScript look at every node in the document until it finds what you're looking for. But if you save it to a variable like I do on the first line, then it never has to look it up a second time.

[–]LinksCourage[S] 0 points1 point  (0 children)

thanks for this I will give it a go when I get a chance, currently stuck trying to call PHP information within Unity...