If else condition Javascript

问题

I have four TextFields on my UI page.I get the input values of the user from all textfields for example values Textfield1.getvalue(),Textfield2.getvalue(),Textfield3.getvalue(),Textfield4.getvalue().

Now on a button click, I need to check which textfields are actually filled by the user and attach those values I need to send a http request to the server to query on the database. These values are used to filter values from a table. SO basically the values are "TABLE COLUMN" values. For this, I thought of using old school combinations like:

if  (Textfield1.getvalue()=="" && Textfield2.getvalue()!=""){
//do something
}
else if (Textfield2.getvalue()=="" && Textfield3.getvalue()!=""){
//do something
}
else if (Textfield3.getvalue()=="" && Textfield4getvalue()!=""){
//do something
}
......

and so on.

This, I personally feel is not efficient and not a good programming way. I am pretty sure there might be some other way of doing it which I am not aware of and couldnt find googling it either. Can anyone share some ideas for a better solution.

Thanks in advance.

回答1:

One idea - check individual fields once and combine into a single unique value:

var c=0;
if (condition1) c+=1;
if (condition2) c+=2;
if (condition3) c+=4;

Etc. now every combination of conditions has a unique value associated with it and you can use a switch statement for cleaner flow.

回答2:

If you want to do something based on first field that has a value, at least that is what it looks like from your sample, you could do something like:

» Simple Fiddle. «

var do_something = {
    0 : function(val) { console.log("Doing x width " + val)},
    1 : function(val) { console.log("Doing y width " + val)},
    2 : function(val) { console.log("Doing z width " + val)},
    3 : function(val) { console.log("Doing w width " + val)},
}

$("#post").on("click", function() {
    var val;
    $(".test").each(function(i) {
        val = $(this).val();
        if (val) {
            do_something[i](val);
            return false; // Break
            // (Or omit the break if you want to "do_something" with all fields
            //  having a value.)
        }
    });
});

Or, depending on various, a better solution could be:

var do_something2 = {
    act1 : function(k, val) { console.log("Doing x width " + val + " k=" + k) },
    act2 : function(k, val) { console.log("Doing y width " + val + " k=" + k) },
    act3 : function(k, val) { console.log("Doing z width " + val + " k=" + k) }
};

$("#post2").on("click", function() {
    var val;
    $(".test").each(function(i) {
        val = $(this).val();
        if (val) {
            do_something2[$(this).data("act")](i, val);
            return false; // Break
        }
    });
});

Where you have input fields like this (dynamically or otherwise created):

<input type="text" data-act="act1" class="test" value="one" />
<input type="text" data-act="act2" class="test" value="two" />

This way you can also easily change what action is taken per field simply by setting the data-act value to wanted function.

回答3:

Think of data instead of control flow. I'd suggest thinking of the problem this way:

Data -> Validation -> Side effects

All those steps must be uncoupled. Here's example, you may have to re-think your data to adapt your code:

// Data
var fields = [Textfield1, Textfield2, Textfield3, Textfield4];

// Validation
var valid = fields.filter(function(x) {
  return x.getvalue();
});

// Side effects
valid.forEach(function(field) {
  var value = field.getvalue();
  // do something
});

来源：https://stackoverflow.com/questions/21922974/if-else-condition-javascript

标签

javascript

jquery

if-statement