1
\$\begingroup\$

I've got some if and else if statements to show and hide svg elements and it works the way it should but I wonder if I can shorten the code since it looks so repetitive.

I'm not sure if it's possible since I'm not a JS/JQuery expert.

If/else if code

        //Door type 1
        if( id2 == "#Door1" && id3 == "#Grey")
        {
            var door = "#Door1Grey"
            $("g" + door).show().siblings("g:not(#BG)").hide();
            //console.log($("g" + door).show().siblings());
        }
        else if( id2 == "#Door1" && id3 == "#Blue")
        {
            var door = "#Door1Blue"
            $("g" + door).show().siblings("g:not(#BG," + id + ")").hide();
            //console.log(door);
        }
        else if( id2 == "#Door1" && id3 == "#Red")
        {
            var door = "#Door1Red"
            $("g" + door).show().siblings("g:not(#BG," + id + ")").hide();
            //console.log(door);
        }

        //Door type 2
        else if( id2 == "#Door2" && id3 == "#Grey")
        {
            var door = "#Door2Grey"
            $("g" + door).show().siblings("g:not(#BG," + id + ")").hide();
            //console.log(door);
        }
        else if( id2 == "#Door2" && id3 == "#Blue")
        {
            var door = "#Door2Blue"
            $("g" + door).show().siblings("g:not(#BG," + id + ")").hide();
            //console.log(door);
        }
        else if( id2 == "#Door2" && id3 == "#Red")
        {
            var door = "#Door2Red"
            $("g" + door).show().siblings("g:not(#BG," + id + ")").hide();
            //console.log(door);
        }

        //Door type 3
        else if( id2 == "#Door3" && id3 == "#Grey")
        {
            var door = "#Door3Grey"
            $("g" + door).show().siblings("g:not(#BG," + id + ")").hide();
            //console.log(door);
        }
        else if( id2 == "#Door3" && id3 == "#Blue")
        {
            var door = "#Door3Blue"
            $("g" + door).show().siblings("g:not(#BG," + id + ")").hide();
            //console.log(door);
        }
        else if( id2 == "#Door3" && id3 == "#Red")
        {
            var door = "#Door3Red"
            $("g" + door).show().siblings("g:not(#BG," + id + ")").hide();
            //console.log(door);
        }

id, id2 and id3 are set here:

        var wallChoice = String($('input[name=radiosWall]:checked', '#myFormFront').val());
        var id = String("#" + wallChoice);
        $("g" + id).show().siblings("g:not(#BG," + id + ")").hide();

        var doorChoice = String($('input[name=radiosDoor]:checked', '#myFormFront').val());
        var id2 = String("#" + doorChoice);

        var doorColorChoice = String($('input[name=radiosColor]:checked', '#myFormFront').val());
        var id3 = String("#" + doorColorChoice);
\$\endgroup\$
  • \$\begingroup\$ The desire to improve code is implied for all questions on this site. Question titles should reflect the purpose of the code, not how you wish to have it reworked. See How to Ask. \$\endgroup\$ – Ethan Bierlein Feb 11 '16 at 14:46
  • \$\begingroup\$ I wasn't sure if I should've added it or not, I changed it now. \$\endgroup\$ – yoshiMannaert Feb 11 '16 at 14:49
  • \$\begingroup\$ Please show us your SVG as well. You could make a live demo by pressing Ctrl-M in the question editor. \$\endgroup\$ – 200_success Feb 11 '16 at 18:09
4
\$\begingroup\$

You're right, it is a bit repetitive. I believe you could boil it down to the following:

var door = id2 + id3.substr(1);
$("g" + door).show().siblings("g:not(#BG," + id + ")").hide();

or even:

$("g" + id2 + id3.substr(1)).show().siblings("g:not(#BG," + id + ")").hide();



ALSO if you change:

var doorColorChoice = String($('input[name=radiosColor]:checked', '#myFormFront').val());
var id3 = String("#" + doorColorChoice);

to

var id3 = String($('input[name=radiosColor]:checked', '#myFormFront').val());

you could have:

$("g" + id2 + id3).show().siblings("g:not(#BG," + id + ")").hide();

(provided the rest of your code doesn't need the "#" (hash) in id3. That would be faster than using substr)

\$\endgroup\$
  • \$\begingroup\$ Happy to help :) \$\endgroup\$ – Ivan Modric Feb 11 '16 at 14:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.