0

我对 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-tiled 类并添加了 listNews-List 类，但它也添加了显示块：无；我不想要。

如果您能提供帮助，那就太棒了。

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

4

1 回答 1

1

jQuery.addClass不支持您显然认为的完成回调（与fadeInor相反）。fadeOut含义代码如：$(body).addClass('example', function() {...})添加类后将不会运行该函数。课程立即添加。文档指出该函数可能会被传递给，addClass但预计它会返回将作为类名添加的字符串。

作为修复，当您将函数传递给 addClass 时，请使用以下内容替换部件：

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

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

我检查了一下，差异背后的原因（带有 jQ​​ueryUI 的版本与没有它的版本）实际上是 addClass 函数的实现。使用常规（普通）jQuery，addClass 的情况如上所述，而使用 jQueryUI 则完全不同。如此处所述，jQueryUI 覆盖 addClass 函数并使其能够在没有和具有给定类名的状态之间进行动画转换。这就是为什么在附加 jQueryUI 之后你会获得更流畅的动画，因为你不仅可以使用淡入/淡出进行动画处理，还可以通过简单地使用addClass回调来为状态设置动画。

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

于 2012-12-14T11:22:01.363 回答