0

私は JavaScript にかなり慣れていません。これは私の最初のスクリプトの 1 つです。

基本的に、グリッド ベースのニュース リストをリスト ベースのニュース リストに変換するスクリプトを作成しようとしています。両方を持っていたとき、私はそれがすべてうまくいった

<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 クラスを追加しますが、display block: none; も追加します。私はしたくない。

あなたがそれを助けることができれば、それは素晴らしいことです.

プレビューへのリンク http://www.psykestudios.co.uk/News%20List-Grid%20selector/

4

1 に答える 1

1

jQuery.addClassは、あなたがどうやら思っているように、(またはとは対照的に)fadeIn終了コールバックをサポートしていません。fadeOut次のような意味のコード:$(body).addClass('example', function() {...})クラスが追加されると、関数は実行されません。クラスは即座に追加されます。ドキュメントには、関数を渡すことができるとaddClass記載されていますが、クラス名として追加される文字列を返すことが期待されています。

修正として、関数を addClass に渡すときにパーツを次のように置き換えます。

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

編集: ははは、この質問には、私が最初に考えていたよりもはるかに多くのことがありました.

私がチェックしたところ、（jQueryUIを使用したバージョンと使用していないバージョンの）違いの背後にある理由は、実際には addClass 関数の実装です。通常の (プレーンな) jQuery の場合、addClass の状況は上で説明したとおりですが、jQueryUI の場合はまったく異なります。here で説明されているように、jQueryUI は addClass 関数をオーバーライドし、指定されたクラス名を使用しない状態と使用する状態の間の遷移をアニメーション化できるようにします。そのため、fadeIn/Out でアニメーション化するだけでなく、コールバックを使用するだけで状態をアニメーション化するため、jQueryUI をアタッチした後、よりスムーズなアニメーションが得られaddClassます。

要約すると。jQueryUI を取り除きたい場合は、上に貼り付けたコードに固執してください。より滑らかなアニメーションが必要な場合は、jQueryUI を埋め込みます。jQueryUI に関する懸念がそのサイズである場合は、独自のカスタム ダウンロードを作成し、addClass 関数の新しいバージョンを提供する部分だけを選択します (したがって、おそらくコアで十分です)。

于 2012-12-14T11:22:01.363 に答える