Question

Is there a way to make this prettier;

if ($("#Input").text === "A") { sOutput = "a"; lColor = "red"; }
if ($("#Input").text === "B") { sOutput = "b"; lColor = "orange"; }
if ($("#Input").text === "C") { sOutput = "c"; lColor = "yellow"; }
if ($("#Input").text === "D") { sOutput = "d"; lColor = "green"; }
if ($("#Input").text === "E") { sOutput = "e"; lColor = "blue"; }
if ($("#Input").text === "F") { sOutput = "f"; lColor = "violet"; }
...

The real code is much more extensive, with && and || between different variables. But each line follows the same syntax save the ‘letter(s)’ I’m looking for, and the variables I set. It just feels wasteful to me that I have so many ifs.

*The code is dummy code to illustrate my point.

EDIT

Dummy code isn’t illustrating my point, so here’s a sample of the real;

    if ($(".Fig_Main").hasClass("Active")) {
        sect_1 =  (($(".Fig_A").hasClass("Active")) && ($(".Fig_1").hasClass("Active"))) ? "Slide_A1"
              : (($(".Fig_A").hasClass("Active")) && ($(".Fig_B").hasClass("Active"))) ? "Slide_AB"
              : (($(".Fig_1").hasClass("Active")) && ($(".Fig_B").hasClass("Active"))) ? "Slide_1B"
              : (($(".Fig_1").hasClass("Active")) && ($(".Fig_3").hasClass("Active"))) ? "Slide_13"
              ...

I have this block (which is several lines longer) repeated a few times, for a different sect_# each time, and resultant set value (Slide_XY).

All the current suggestions are much appreciated. Keep it coming.

Answer 1

You could do something like this:

var dic = {
  "a": "red",
  "b": "orange",
  "c": "yellow",
  "d": "green",
  "e": "blue",
  "f": "violet"
};

sOutput = $("#Input").text().toLowerCase();
lColor = dic[sOutput];