javascript - 使用 jQuery 打开和关闭类

Question

我在 jQuery 中有一个相当简单的 .addClass(open) 函数，但是我在传递正确的变量时遇到了问题。

我在边栏中有这两个按钮:

<ul>
  <li class="dashButton active" id="#1"><?php the_field('sidebar_text_0'); ?></li>
  <li class="dashButton" id="#2"><?php the_field('sidebar_text_1'); ?></li>
</ul>

然后两个 div 在单击按钮时应该在彼此的位置打开。 mainDashWrap 与 id=#1 相关，editProfile 与 id=#2 相关。

<div class="mainDashWrap dashView open">
   ...... content .....
</div>
<div class="editProfile dashView">
   ...... content .....
</div>

我的jQuery添加和删除了open类，如果没有open类和display，它有display:none :block 如果它确实有开放类。

我的问题出在下面的 //Get the attr2 部分。我认为它没有正确设置类，因此它的格式无法进入 $(newSect).slideDown() 函数。

                $('.dashButton').click(function() {

                    //Switch active Tab Buttons and close the Menu.
                    $('.dashButton.active').removeClass('active');
                        $(this).addClass('active');
                        $('.dashView.open').removeClass('open');

                        //Get the attr2 
                        if ( this.id == '#1') {
                            var attr2 = '.mainDashWrap';
                        }
                        else { var attr2 = '.editProfile' }

                        switchDashViews(attr2);
                });

                function switchDashViews(newSect) {

                    //close active section
                    $('.dashView.open').slideUp('2000', function() {
                        $('.dashView.open').removeClass('open');
                        $(newSect).slideDown('2000', function() { 
                            $(newSect).addClass('open');
                        });
                    });
                };

这将添加和删除 open 类并隐藏没有 open 类的 dashview，但它不会添加 open 类到 newSect 或向下滑动 newSect。如何让 attr2/newsect 正确设置？

Answer 1

我想你首先删除了点击事件中的所有.open

$('.dashView.open').removeClass('open');

然后才尝试在 switchDashViews 函数中向上滑动此元素

$('.dashView.open').slideUp('2000'...

但是.open已经被删除了

更新。尽量不要在此 block 中使用 var 关键字

if ( this.id == '#1') {
    var attr2 = '.mainDashWrap';
}
else { var attr2 = '.editProfile' }

因为 attr2 可能超出范围。只是

if ( this.id == '#1') {
    attr2 = '.mainDashWrap';
}
else { attr2 = '.editProfile' }