Geek Answers Handbook

How can I simplify this jquery / javascript

I am trying to improve jquery / javascript syntax. Is there a better way to write this?

if (ok) var mymsg = '<p id="ok-box">' + "You're good to go" + '</p>'; }else { var mymsg = '<p id="not-ok-box">' + "Error" + '</p>'; }

I thought that if jquery / javascript had a similar syntax for the following PHP syntax, it would be great:

 $mymsg = ($ok) ? "You're good to go" : "Error";
+4
source share
9 answers

Do you mean:

 var mymsg = ok ? '<p id="ok-box">You\'re good to go</p>' : '<p id="not-ok-box">Error</p>';

This is true!:)

+12
source

The best way to write that in my opinion:

 if (ok) var mymsg = '<p id="ok-box">You\'re good to go</p>'; } else { var mymsg = '<p id="not-ok-box">Error</p>'; }

Ternary operators make code more confusing, no less. The most obvious change that I see is to get rid of the extra rows and do it all in one go. The lines you have are very simple, and in fact they do not need to be split into 3 lines.

+1
source

Think of javascript templates - they are much better than hard coding strings, and mixing logic with presentation code. google saw a viable (no doubt more there): http://peter.michaux.ca/articles/javascript-template-libraries

 <script language="javascript"> //call your methods and produce this data var data = ok?{cssClass:"ok-box",msg:"OK some custom msg"} :{cssClass:"not-ok-box",msg:"NOT OK custom msg"}; </script> <textarea id="msg_template" style="display:none;"> <p id="${cssClass}">${msg}</p> </textarea> <script language="javascript"> var result = TrimPath.processDOMTemplate("msg_template", data); document.getElementById('content').innerHTML = result; </script>
+1
source

You can use the ternary operator (this is a fancy name for the if trick on the same line):

 var is_ok = true; var myMsg = is_ok ? "You're good to go" : "Error";

But you are changing the two parts of your p tag, so instead you can do something like this:

 // defaults var myMsg = "You're good to go"; var msgClass = "ok-box"; if ( !is_ok ) { myMsg = "Error"; msgClass = "not-ok-box"; }

The problem with this is that now you have two variables that fly ... not very neat, so you can wrap them in an object:

 var myMsg = { text : "You're good to go", cssClass : "ok-box" } if ( !is_ok ) { myMsg.text = "Error"; myMsg.cssClass = "not-ok-box"; }

which is tidier and fully autonomous.

 var myBox = '<p class="' + msgClass + '">' + myMsg + '</p>';

However, I would create the element using code (which I do not know how to do in jquery since I am a mootools boy). In mootools, it will be something like this:

 myBox = new Element( "p", { class : msgClass, html : myMsg } );
0
source

Are you looking for a comprehensible one? Or the shortest? Does an element really need different identifiers?

 var mymsg = '<p id="' + (ok ? '' : 'not-') + 'ok-box">' + (ok ? "You're good to go" : 'Error') + '</p>';
0
source

If you need to use ternary operators in your code (try not to do this, it is terribly difficult to do later), try to surround them with brackets to look more like instructions, to simplify their execution:

 var mymsg = '<p id="' + (!ok ? 'not-' : '') + 'ok-box">' + (ok ? 'You\'re good to go' : 'Error') + '</p>';
0
source

I would dwell on a few answers above. You can use jquery much more here. Despite the fact that in reality it is not very much, except for convenience.

 var myMsg = "You're good to go"; var msgClass = "ok-box"; if ( !ok ) { myMsg = "Error"; msgClass = "not-ok-box"; }

If this is inside a function, don’t worry about names changing variables. In any case, they will be local. Then, since you are using jquery, use it to create elements.

 var okbox = $('<p id="' + msgId + '">' + myMsg + '</p>').get();

You can then add okbox anywhere using jquery methods.

 $('#content').append(okbox);

Since this is a small piece of html code, you need not worry about performance. Of course, YMMV.

0
source

Here you go

 if (ok) { var mymsg = "<p id=\"ok-box\">You're good to go</p>"; } else { var mymsg = "<p id=\"not-ok-box\">Error</p>"; }
0
source

Do not declare your variables in scope, which will disappear before using this variable.

var mymsg = '<p id=';
mymsg += $ok ? '"ok-box">You\'re good to go' : '"not-ok-box">Error';
mymsg += '</p>';

BTW idiots who promote a dangerous definition without realizing how much they will bite you in other languages ​​need to hang.

-one
source

More articles:


All Articles