2013-03-21 77 views
1

我似乎无法让我的箭头,在正确的方向显示当折叠项目折叠或展开(JSFiddleif语句不正常

代码:

$('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"); 
    } 
}); 

此行没有如预期运行:

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

当我点击展开所有的项目应扩大(工作),箭头应指向下(不工作)。当我点击全部折叠时,相反应该发生。 例如,如果我点击其中一个绿色项目,然后点击全部展开,则所点击项目的箭头方向不同。

我在做什么错?如果我有一个巨大的列表,是否有任何性能问题需要解决?谢谢!

+0

适用于我(如果你正在谈论绿色物品旁边的箭头) – bfavaretto 2013-03-21 01:35:12

+0

例如,如果我点击其中一个绿色物品,然后点击展开全部,点击物品的箭头方向不同。 – theintellects 2013-03-21 01:37:25

+0

对不起,我错过了展开所有链接。似乎你已经有了一个可行的答案。 – bfavaretto 2013-03-21 01:52:59

回答

1

这是一个工作JSFiddle

您的问题实际上是一个事实,即下面的代码

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

总是在这种特定的情况下,由于$返回true(“ projectscontainer”)。找到(‘div.destarrow’)返回的数组箭头元素包含一些带有箭头的箭头和右箭头以及箭头向下的箭头,因此总是返回true。我重新考虑了使用过滤器的代码。

+0

有道理。谢谢! – theintellects 2013-03-21 02:56:27

2

注:tutiputes答案是正确的,与他们一起去。

这里是一个工作fiddle

你改变了文本,然后检查以前的状态采取相应的行动。

存储文本,并在更改后再次检查。

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

此外,您的切换是倒退。您想在展开时展开,反之亦然。


您问到性能问题。

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

你可能会认为有关存储您的jQuery选择这样你就不会不断地通过DOM生根。这不是一笔巨大的交易,但取决于未来项目的规模,它会派上用场。

+0

好的,我会用tutiputes的答案去。谢谢您的帮助!还要感谢关于存储选择器的提示。不知道在jQuery中工作,我会牢记在心。 – theintellects 2013-03-21 02:54:24