jquery - Another way to write javascript - Stack Overflow

admin管理员组

文章数量:1296467

What's another more terse way to write the following. Basically it toggles the visibility of 2 button based on a condtion.

$("#myCheckBox").click(function() {
    if (window.console && window.console.log)
        console.log("billing only checked? " + this.checked);
    if (this.checked) {
        $("#btnNext").hide();
        $("#btnFinish").show();
    }
    else {
        $("#btnNext").show();
        $("#btnFinish").hide();
    }
});

Just looking for a more efficient way possibly?

What's another more terse way to write the following. Basically it toggles the visibility of 2 button based on a condtion.

$("#myCheckBox").click(function() {
    if (window.console && window.console.log)
        console.log("billing only checked? " + this.checked);
    if (this.checked) {
        $("#btnNext").hide();
        $("#btnFinish").show();
    }
    else {
        $("#btnNext").show();
        $("#btnFinish").hide();
    }
});

Just looking for a more efficient way possibly?

• javascript
• jquery

Share Follow edited Oct 21, 2011 at 17:34 gilly3 91.7k2626 gold badges147147 silver badges179179 bronze badges asked Oct 21, 2011 at 17:32 RodRod 15.5k3535 gold badges134134 silver badges263263 bronze badges 6

• 2 You'll only get terser ways of writing it, which usually means "harder to read". Leave it as is - it's fine. – Marc B Commented Oct 21, 2011 at 17:36
• Is button finish hidden to begin with ? Event before clicking the checkbox ? – aziz punjani Commented Oct 21, 2011 at 17:36
• You should optimize for readability. Why do you think this isn't efficient enough? – ObscureRobot Commented Oct 21, 2011 at 17:37
• Similar to jQuery hide one div show another – Richard JP Le Guen Commented Oct 21, 2011 at 17:37
• 1 Try telling that to your hung-over self at 2AM six months from now when an obscure bug hits the fan. (I've been there. It isn't much fun. Don't make it worse). Note - I'm taking issue with your request for "terse" code, which is often harder to read. A request for a more concise solution would produce more positive results. It is all about the question framing. – ObscureRobot Commented Oct 21, 2011 at 17:43

 |  Show 1 more ment

7 Answers 7

Sorted by: Reset to default 15

You can use .toggle, which accepts an argument indicating whether an element should be shown or hidden:

$("#btnNext").toggle(!this.checked);
$("#btnFinish").toggle(this.checked);

If the visibility is correctly set up from the beginning, you don't even have to pass an argument:

$("#btnNext, #btnFinish").toggle();

---

I agree with others regarding readability though. .toggle by itself might be still understandable, but .toggle(!this.checked) can bee more difficult to prehend.

Use the toggle() function - http://api.jquery./toggle/

You can use .toggle():

$("#myCheckBox").click(function() {
    if (window.console && window.console.log)
        console.log("billing only checked? " + this.checked);
    $("#btnNext").toggle(!this.checked);
    $("#btnFinish").toggle(this.checked);
});

You can reduce this:

if (this.checked) {
    $("#btnNext").hide();
    $("#btnFinish").show();
}
else {
    $("#btnNext").show();
    $("#btnFinish").hide();
}

to this:

$("#btnNext").toggle(!this.checked);
$("#btnFinish").toggle(this.checked);

Assuming that they start in the correct show and hide states you can just do the following.

$("#myCheckBox").click(function() {
  if (window.console && window.console.log) {
    console.log("billing only checked? " + this.checked);
  }
  $("#btnNext").toggle();
  $("#btnFinish").toggle();
}

you can use .toggle() instead of show/hide, then you could get rid of the if/else construct.

It may not be 100% efficient - I'm sure you can condense this by using a clever ternary or something (Edit: Felix Kling has a nice one already) - but on the other hand, it is perfectly readable this way, even for a person who is not familiar with the project at all.

My tendency would be to leave it as it is.

本文标签： jqueryAnother way to write javascriptStack Overflow