Question

当折叠或展开折叠项目时，我似乎无法让箭头显示在正确的方向上（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");

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

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

Answer 1

注意：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。这不是一个大问题，但取决于未来项目的规模，它会派上用场。

Answer 2

这是一个有效的JSFiddle。

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

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

在这种特定情况下总是返回true，因为$（'。projectscontainer'）。find（“div.destarrow”）返回箭头元素数组，其中包含一些箭头右箭头和一些带箭头的箭头类因此总是回归真实。我已经重新考虑了使用过滤器的代码。

如果声明不正常

2 个答案: