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类，如果没有display:none类，则为open，如果确实有开放类，则为display: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课程的短划线视图，但不会将open课程添加到newSect课程或者向下滑动newSect。如何正确设置attr2 / newsect？

Answer 1

我认为您首先删除了点击事件中的所有.open

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

之后才尝试在switchDashViews函数

中向上滑动这些元素

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

但.open已被删除

<强> UPD 即可。尽量不要在此块中使用var个关键字

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

因为attr2可能超出范围。刚

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

Answer 2

不要在ID中加入long long。虽然它在现代浏览器中是合法的，但令人困惑，并且难以使用jQuery或CSS选择器访问该元素。而是使用

然后更改<li class="dashButton active" id="1">以匹配此内容：

if

我还建议您使用比数字更有意义的ID。

Answer 3

从您的HTML中的ID中删除#，它不是ID中的允许字符，（想象一下哪个选择器看起来像$(##1)，非常糟糕，是吗？）。
添加data-attribute，以便您可以摆脱if() .. else() ...

HTML

<ul>
  <li class="dashButton active" data-class=".mainDashWrap" id="1"><?php the_field('sidebar_text_0'); ?></li>
  <li class="dashButton" data-class=".editProfile" id="2"><?php the_field('sidebar_text_1'); ?></li>
</ul>

的jQuery

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

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

                        // Do this
                        var attr2 = $(this).data("class");

                        /* Or you can do this
                        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');
                        });
                    });
                };

有意义吗？

Answer 4

此可能因功能范围而异，请尝试使用 event.target ，以便 this.id event.target.id 即可。通过更改查看代码示例：

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

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

                    //Get the attr2 
                    if ( event.target.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');
                    });
                });
            };

Answer 5

我认为this.id无法奏效。 ~~您想通过this将$(this)转换为jQuery对象，然后使用attr()方法检索＆＃39; id＆＃39;。所以像... ~~

修改

结果this.id确实有效！没有注意到HTML标记中的id="#1"。是的，正如其他人所指出的那样，这将是罪魁祸首。

使用jQuery打开和关闭类

5 个答案:

HTML

的jQuery