Take the 2-minute tour ×
Code Review Stack Exchange is a question and answer site for peer programmer code reviews. It's 100% free, no registration required.

I'm writing away for this website, and I've come into a problem. I need to display only one td based on the corresponding radio button pressed. However, there are two 'master' radio buttons that dictate how many radio buttons are shown, and after that, which are selected. - if that makes any sense!

Now, I am only showing a very small snippet of what I actually have at the moment - this nested if statement goes on 5 more times. So, as you can probably imagine, it looks horrendous. And I'm not sure if there is a better way, maybe there is a way to create functions that can be called? What do you all think?

$('input:radio').change(function () {
                if (this.id == prodMoveRadio) {
                    if ($("#ExtIdTd").is(":visible") === true) {
                        $("#ExtIdTd").css({ visibility: "hidden" });
                        $("#LocIdTd").css({ visibility: "visible" });
                        $("#" + locIdRadio).prop("checked", true);
                        $("#ExtIdTr").css({ visibility: "hidden" });
                    }
                    else {
                        $("#MainContent_DetailsPanel").css({ visibility: "hidden" });
                        $("#ExtIdTr").css({ visibility: "hidden" });
                        $("#LocIdTd").css({ visibility: "visible" });
                        $("#" + locIdRadio).prop("checked", true);
                    }
                }
                else if (this.id == opMoveRadio) {
                    if ($("#ExtIdTd").is(":visible") === false) {
                        $("#ExtIdTr").css({ visibility: "visible" });
                        $("#ExtIdTd").css({ visibility: "visible" });
                    }
                    else {
                        $("#MainContent_DetailsPanel").css({ visibility: "visible" });
                        $("#" + extIdRadio).prop("checked", true);
                        $("#ExtIdTr").css({ visibility: "visible" });
                        $("#ExtIdTd").css({ visibility: "visible" });
                        $("#LocIdTd").css({ visibility: "hidden" });
                    }
                }

Edit

Would it be 'clean' to put a class onto the td's I need to hide, and hide that whole class then set only the visibility to visible on the td I require? Thoughts?

share|improve this question
add comment

1 Answer

up vote 2 down vote accepted

You could use polymorphism to represent the states, and to apply the needed formatting.

share|improve this answer
    
Reading up on them now, and they seem to be exactly what I'm after. Thank you! –  DeeKayy90 Apr 7 at 3:36
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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