if statement not functioning correctly

Question

I can't seem to get my arrows to show in the right direction when a collapsing item is collapsed or expanded (JSFiddle)

Code:

$('body').on("click", "span#expandcollapse", function ()
{
    $(this).text(function(i, currentText)
    {
        return currentText === 'Expand All' ? 'Collapse All' : 'Expand All';
    });

    if($(this).text() === 'Expand All')
    {
        //Currently collapsed
        if($('.projectscontainer').find("div.destarrow").hasClass('arrow-right'))
            $('.projectscontainer').find('div.destarrow').toggleClass("arrow-right arrow-down");
        $(".projectscontainer").find(".srcprojects").toggle(false);
    } 
    else 
    {
        //Currently expanded
        $(".projectscontainer").find(".srcprojects").toggle(true);
        if($('.projectscontainer').find("div.destarrow").hasClass('arrow-down'))
            $('.projectscontainer').find('div.destarrow').toggleClass("arrow-down arrow-right");
    }
});

This line is not working as intended:

    if($('.projectscontainer').find("div.destarrow").hasClass('arrow-down'))
        $('.projectscontainer').find('div.destarrow').toggleClass("arrow-down arrow-right");

When I click expand all, the items should expand (working), and the arrows should point down (not working). When I click collapse all, the opposite should occur. For example, if I click one of the green items, then click expand all, the arrow for the item clicked is in a different direction.

What am I doing wrong? And are there any performance problems here I need to fix if I have a huge list? Thanks!

Works for me (if you're talking about the arrows next to the green items) — bfavaretto
– bfavaretto, Commented Mar 21, 2013 at 1:35
For example, if I click one of the green items, then click expand all, the arrow for the item clicked is in a different direction. — theintellects
– theintellects, Commented Mar 21, 2013 at 1:37
Oh sorry, I missed the expand all link. Seems you got a working answer already. — bfavaretto
– bfavaretto, Commented Mar 21, 2013 at 1:52
from what I checked, castis answer didn't work so I've updated my fiddle. Hope it helps... — sagibb
– sagibb, Commented Mar 21, 2013 at 2:20

castis · Accepted Answer · 2013-03-21 02:35:24Z

2

NOTE: tutiputes answer is correct, go with theirs.

Here is a working fiddle

You changed the text and then check for its previous state to act accordingly.

Store the text, and check again after the change.

var currText = $(this).text();
$(this).text(function(i, currentText){
    return currentText === 'Expand All' ? 'Collapse All' : 'Expand All';
});
if(currText === 'Expand All'){//Currently collapsed

Also, your toggles were backwards. You want to expand when collapsed, and vice versa.

You asked about performance issues.

http://jsfiddle.net/wuqes/2/

You might think about storing your jQuery selectors so you're not constantly rooting through the DOM. It's not a huge deal but depending on the size of future projects, it will come in handy.

edited Mar 21, 2013 at 2:35

answered Mar 21, 2013 at 1:51

castis

8,2144 gold badges45 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

theintellects Over a year ago

Okay, I will go with tutiputes' answer. Thanks for the help! Also appreciate the tip about storing the selectors. Wasn't sure that worked in jQuery, I will keep it in mind.

sagibb · Accepted Answer · 2013-03-21 02:27:16Z

1

Here is a working JSFiddle.

Your issue was actually with the fact that the below code

$('.projectscontainer').find("div.destarrow").hasClass('arrow-right')

always returns true in this specific case since $('.projectscontainer').find("div.destarrow") returns the array of arrow elements that contains some arrows with arrow-right and some arrows with the arrow-down class, hence always returning true. I've re-factored the code to use a filter.

edited Mar 21, 2013 at 2:27

answered Mar 21, 2013 at 1:45

sagibb

9562 gold badges9 silver badges21 bronze badges

Collectives™ on Stack Overflow

if statement not functioning correctly

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related