Correct Way Of Achieving This Result?

Question

So I currently have this piece of code:

if(direction === "right" ) { var signOne = '-'; var signTwo = ''; }
if(direction === "left" ) { var signOne = ''; var signTwo = '-'; }

innerWork.not('.active').css({'left': signOne + '450px'}); // Move the not active text to the left
innerImg.not('.active').css({'left': signOne + '370px'}); // Move the not active images to the left

where the right or left gets passed through the function. And what I want to happen, and it works as expected is that if the function is given says right, then it makes the two left values minus and if the function is run with "left" then it gives positive values.

As I said, it all works but JSHint/Lint throws up errors about, a) the variables being defined twice and b) that the variables are being used out of scope. Is there a neater way to achieve what I want that would be syntantically correct?

Answer 1

var signOne, signTwo;
if(direction === "right" ) { signOne = '-'; signTwo = ''; }
if(direction === "left" ) { signOne = ''; signTwo = '-'; }

innerWork.not('.active').css({'left': signOne + '450px'}); // Move the not active text to the left
innerImg.not('.active').css({'left': signOne + '370px'}); // Move the not active images to the left

Answer 2

You need to declare the variables in the same scope they are used in.

var signOne, signTwo;

if(direction === "right" ) { signOne = '-'; signTwo = ''; }
else if(direction === "left" ) { signOne = ''; signTwo = '-'; }

innerWork.not('.active').css({'left': signOne + '450px'}); // Move the not active text to the left
innerImg.not('.active').css({'left': signOne + '370px'}); // Move the not active images to the left

Answer 3

var signOne, signTwo;

if(direction === "right" ) { signOne = '-'; signTwo = ''; }
if(direction === "left" ) { signOne = ''; signTwo = '-'; }

innerWork.not('.active').css({'left': signOne + '450px'}); // Move the not active text to the left
innerImg.not('.active').css({'left': signOne + '370px'}); // Move the not active images to the left

Answer 4

If you're learning about JS, I would highly recommend reading JavaScript: The Good Parts by Douglas Crockford. He is the original author of JSLint and his rules of JS style are widely regarded as gospel.

With regard to your question, the reason that JSLint/Hint is giving you errors is due to the fact that your variable declarations are written repeatedly within conditional blocks. A better construction would be to initialize the variables outside of the conditional blocks and then define them within the condition. Consider the following:

var signOne, signTwo;

if (direction === "right") {
  signOne = '-';
  signTwo = '';
} else if (direction === "left") {
  signOne = '';
  signTwo = '-';
}

innerWork.not('.active').css({'left': signOne + '450px'}); // Move the not active text to the left
innerImg.not('.active').css({'left': signOne + '370px'}); // Move the not active images to the left