Question

我是JavaScript的新手，这是我的第一个脚本之一。

基本上我正在尝试创建一个脚本，将基于网格的新闻列表转换为基于列表的新闻列表。当两者兼得时，我的一切都很好。

<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>

但我删除了ui脚本，因为我真的不需要它（我认为）

现在我的脚本无法正常运行。我的脚本是

//Javascript Start 

//SETTINGS
var settings = {
    //Header Slider Settings
    listBtn: 'input.toggle',
    listItem: '.wrapper ul',
    listStyleOne: 'listNews-tiled',
    listStyleTwo: 'listNews-list',
    fadeSpeed: 300
}

function NewsListSwitcher() {
    $(settings.listBtn).click(function () {
        //If News List has a certian class
        if ($(settings.listItem).hasClass(settings.listStyleOne)) {
            //Fade Out and remove Class
            $(settings.listItem).fadeOut(settings.fadeSpeed,
                function () {
                    $(settings.listItem).removeClass(settings.listStyleOne);
                }
            );
            //Add Class and Fade In
            $(settings.listItem).addClass(settings.listStyleTwo,
                function () {
                    $(settings.listItem).fadeIn(settings.fadeSpeed);
                }
            );
            //Change background Position Of List Button
            $(settings.listBtn).css("background-position","bottom");
        }
        else {
            //Fade Out and remove class
            $(settings.listItem).fadeOut(settings.fadeSpeed,
                function () {
                    $(settings.listItem).removeClass(settings.listStyleTwo);
                }
            );
            //Add Class and Fade In
            $(settings.listItem).addClass(settings.listStyleOne,
                function () {
                    $(settings.listItem).fadeIn(settings.fadeSpeed);
                }
            );
            //Change background Position Of List Button
            $(settings.listBtn).css("background-position","top");
        }
    });
}
//Javascript End

我的html只是一个基本列表

<div class="wrapper">
    <input type="submit" class="toggle" value="">
    <hr />
    <ul class="listNews-tiled">
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
    </ul>
</div>

当我点击我的图标时，脚本删除了listNews-tiles类并添加了listNews-List类，但它还添加了display block：none;我不想要的。

如果你能帮到那就太棒了。

预览链接 http://www.psykestudios.co.uk/News%20List-Grid%20selector/

Answer 1

jQuery.addClass不支持完成回调（与fadeIn或fadeOut相对），就像您显然认为的那样。添加类后，像$(body).addClass('example', function() {...})这样的含义代码将不会运行该函数。该课程即刻添加。文档声明函数可以传递给addClass但是期望它返回将作为类名添加的字符串。

作为修补程序，在将函数传递给addClass时替换部件，例如：

$(settings.listItem).addClass(settings.listStyleTwo).fadeIn(settings.fadeSpeed);

编辑：哈，这个问题比我最初想的要多得多。

我检查了，差异背后的原因（jQueryUI与没有它的版本）实际上是addClass函数的实现。使用常规（普通）jQuery，addClass的情况如上所述，而使用jQueryUI则完全不同。 As described here，jQueryUI重写addClass函数，并使其能够在没有和具有给定类名的状态之间进行动画转换。这就是为什么在附加jQueryUI之后你会得到更平滑的动画，因为你不仅可以使用fadeIn / Out设置动画，还可以通过简单地使用带回调的addClass来设置动画状态。

总结一下。如果你想摆脱jQueryUI坚持我粘贴在上面的代码。如果你想要更流畅的动画，嵌入jQueryUI。如果您对jQueryUI的关注是它的大小，请创建自己的自定义下载并选择一个为您提供新版本的addClass函数的部分（因此可能核心就足够了）。

删除jquery ui脚本后显示没有添加任何内容

1 个答案: