1

当折叠项折叠或展开时（ JSFiddle），我似乎无法让我的箭头显示在正确的方向

代码：

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

当我单击全部展开时，项目应该展开（工作），并且箭头应该指向下方（不工作）。当我单击全部折叠时，应该会发生相反的情况。例如，如果我单击其中一个绿色项目，然后单击全部展开，则单击的项目的箭头方向不同。

我究竟做错了什么？如果我有一个庞大的列表，这里是否有任何性能问题需要解决？谢谢！

4

2 回答 2

2

注意：tutiputes 的答案是正确的，请选择他们的答案。

这是一个工作小提琴

您更改了文本，然后检查其先前的状态以采取相应的行动。

存储文本，更改后再次检查。

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 中查找。这不是什么大不了的事，但根据未来项目的规模，它会派上用场。

于 2013-03-21T01:51:11.570 回答
1

这是一个有效的JSFiddle。

您的问题实际上是以下代码

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

在这种特定情况下总是返回 true，因为 $('.projectscontainer').find("div.destarrow") 返回箭头元素数组，其中包含一些带有右箭头的箭头和一些带有向下箭头类的箭头，因此总是返回真。我已经重构了代码以使用过滤器。

于 2013-03-21T01:45:22.057 回答