Skip to main content
Code Review

Return to Question

deleted 9 characters in body
Source Link
DeBraid
DeBraid
  • 183
  • 2
  • 8
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") ) 
        {
            $("#ActText"#Text1, #AdaptText#Text2, #PlanText"#Text3").css("opacity", "1");  // return to default state
        }   

 };

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(){
        $("#PlanText"#Text1, #AdaptText#Text2, #ActText"#Text3").animate({"opacity": "1"}, 1000);
};

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") ) 
        {
            $("#ActText, #AdaptText, #PlanText").css("opacity", "1");  // return to default state
        }   

 };

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(){
        $("#PlanText, #AdaptText, #ActText").animate({"opacity": "1"}, 1000);
};

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
        }   

 };

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);
};
Post Migrated Here from stackoverflow.com (revisions)
Source Link
DeBraid
DeBraid
  • 183
  • 2
  • 8

Changing text with a click event: how to restore default state of text in jQuery if/else statement

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") ) 
        {
            $("#ActText, #AdaptText, #PlanText").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(){
        $("#PlanText, #AdaptText, #ActText").animate({"opacity": "1"}, 1000);
};