4
\$\begingroup\$

I have a click event that calls a function which makes some CSS changes (acts on Text in 3 unique text elements).

The function (below) works, but is lacking a 'restore default' function (to return the text to its original state), AND is in dire need of refactoring.

Q: How can the original state of ALL text elements be restored once user clicks away from this section?

Here is the partially working, ugly function:

function txtResize() {

        var clicked = this.id;

        if (clicked == "Text1")
        {
            $("#" + clicked).css("opacity", "1");
            $("#Text2, #Text3").css("opacity", "0.2");
        }
        else if (clicked == "Text2") 
        {
            $("#" + clicked).css("opacity", "1");
            $("#Text1, #Text3").css("opacity", "0.2");
        }
        else if (clicked == "Text3")
        {
            $("#" + clicked).css("opacity", "1");
            $("#Text1, #Text2").css("opacity", "0.2");
        }
         // code above is ok, below does not work

        else if ( !(clicked == "Text1") && !(clicked == "Text2") && !(clicked == "Text3") ) 
        {
            $("#Text1, #Text2, #Text3").css("opacity", "1");  // return to default state
        }   

 };

UPDATE: (20 Jan) - Have improved the code, but it still somewhat clunky and involves two distinct functions.

function txtResize() {

        var clicked = this.id;

        if (clicked === "Text1" || clicked === "Text2" || clicked === "Text3" ) 
        {
            $("#Text1, #Text2, #Text3").animate({"opacity": "0.2"}, 500)
            $("#" + clicked).animate({"opacity": "1"}, 200);
        }
};

function txtRestore(){
        $("#Text1, #Text2, #Text3").animate({"opacity": "1"}, 1000);
};
\$\endgroup\$
  • \$\begingroup\$ Perhaps the note on refactoring could be de-emphasized but the main issue is that my text does not return to its original state (two of the paragraphs remain opacity = unreadable. I want the last statement in if/else to restore text back, and figured in doing so many would point out how badly the code needs refactoring so I threw that in as well. Will edit to ensure focus is on restoring the default value of text, not refactoring. \$\endgroup\$ – DeBraid Jan 16 '14 at 15:22
3
\$\begingroup\$

as a first step I would rewrite the last if statement

else if ((clicked =! "Text1") && (clicked != "Text2") && (clicked != "Text3") ) 
    {
        $("#ActText, #AdaptText, #PlanText").css("opacity", "1");  // return to default state
    } 

After that you could rewrite it as a switch statement: http://www.w3schools.com/js/js_switch.asp

edit : this would be better...

var textArray = new Array("Text1","Text2","Text3");
if($.inArray(clicked,textArray){
    $("#Text2, #Text3").css("opacity", "1");
}
else {
 $("#" + clicked).css("opacity", "0.2");
}
| improve this answer | |
\$\endgroup\$
  • \$\begingroup\$ Your solution itself needs refactoring, I would use an array and $.inArray(). \$\endgroup\$ – undefined Jan 16 '14 at 16:19
  • \$\begingroup\$ Thanks Blacksheep, I didn't even notice that each action in the if statements was the same. \$\endgroup\$ – Ruben Verschueren Jan 16 '14 at 16:46
  • \$\begingroup\$ The text with opacity = 1 should stand alone, the other two text elements should take opacity 0.2. I think this solution has it backwards, meaning if text2 or text3 is clicked, then what? IOW, shouldn't #text2 and #text3 also be variables? \$\endgroup\$ – DeBraid Jan 17 '14 at 1:09
0
\$\begingroup\$

Here is an alternative. I do use that technic a lot as it shrinks the amount of code.

The exec function is self invoked and returns a new function (this is closure); so the elements you want to work with are accessible in the inner function.

var exec = (function() {
    var $el = $('#Text1, #Text2, #Text3'); //allows you to use easily .siblings later    
    return function(id) { //closure
        $el.filter(function() { return this.id === id; }).css("opacity", "1");
        $el.siblings().css("opacity", "0.2");
    };
})(); //self invoked: it returns a new function but has access to $el

var rollback = function() {
    $("#ActText, #AdaptText, #PlanText").css("opacity", "1");  // return to default state
};

['Text1', 'Text2', 'Text3'].indexOf(this.id) > -1 ? exec(this.id) : rollback(); //indexOf is part oc ECMAscript 5th version. So ensure you can use it or provide an alternative/shim 

It is not bullet-proof as I didn't test it. But it provides you with a get-go :)

| improve this answer | |
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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