snippetjavascriptMinor
Changing text with a click event: how to restore default state of text in jQuery if/else statement
Viewed 0 times
clickelsestatementwithtextdefaultjquerystatehowchanging
Problem
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:
UPDATE: (20 Jan) - Have improved the code, but it still somewhat clunky and involves two distinct functions.
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);
};Solution
as a first step I would rewrite the last if statement
After that you could rewrite it as a switch statement: http://www.w3schools.com/js/js_switch.asp
edit : this would be better...
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");
}Code Snippets
else if ((clicked =! "Text1") && (clicked != "Text2") && (clicked != "Text3") )
{
$("#ActText, #AdaptText, #PlanText").css("opacity", "1"); // return to default state
}var textArray = new Array("Text1","Text2","Text3");
if($.inArray(clicked,textArray){
$("#Text2, #Text3").css("opacity", "1");
}
else {
$("#" + clicked).css("opacity", "0.2");
}Context
StackExchange Code Review Q#40759, answer score: 3
Revisions (0)
No revisions yet.