0

私がやろうとしているのは、2 つのボタンを作成することです。1 つのボタンはデータのタイル ビューを表示し、もう 1 つのボタンはデータの行ビューを表示します。コードを次のように設定しました。

    dl = $('.data-list'),
    sr = $('.sort-row'),
    st = $('.sort-tile');

    //add cursor to tile icon default
    st.addClass('active-tile').css({'cursor':'default'});
    //add tile class to data-list
    dl.addClass('tile');

    //add tile class and remove row
    st.click(function() {
        if ($(this).hasClass('active-tile')){
            $(this).removeClass('active-tile').css({'cursor':'pointer'});
            dl.hide().addClass('row').removeClass('tile').fadeIn();
            sr.addclass('active-row');
        } else {
            $(this).addClass('active-tile').css({'cursor':'default'});
            sr.removeClass('active-row');
            dl.hide().addClass('tile').removeClass('row').fadeIn().css('display','block');
        }
    });
    //add row class and remove tile
    sr.click(function() {
        if ($(this).hasClass('active-row')){
            $(this).removeClass('active-row').css({'cursor':'pointer'});
            dl.hide().addClass('tile').removeClass('row').fadeIn();
            st.addclass('active-tile');
        } else {
            $(this).addClass('active-row').css({'cursor':'default'});
            st.removeClass('active-tile');
            dl.hide().addClass('row').removeClass('tile').fadeIn().css('display','block');
        }
    });

HTML:

    <div class="sort-bar fr">
        <span class="sort-tile">Columns</span>
        <span class="sort-row">Rows</span>
    </div>
    <div class="data-list">
            <section></section>
            <section></section>
    </div>

クラスを追加できるようにデータリストを一時的に非表示にするように設定してから、行を追加してデータのスタイルを変更します。

これに対する私の最初のポイントは、行がアクティブなときにタイルボタンを無効にする方法、またはその逆の方法が完全にはわからないということです。アンバインドを使用してみましたが、両方のボタンが永久に無効になっているようです。もう 1 つの部分は、そこには大量のコードがあり、これを必ずしも効率的に行っているとは限らないということです。コードを削減する方法についての提案は大歓迎です。ここではトグルクラスが良い使い方だと思いますが、どこに行くべきか完全にはわかりません。

編集:誰かが jsfiddle を求めました。

編集:それぞれをクリックすると、他のボタンからアクティブが削除されますが、もう一度クリックすると、そこからもアクティブが削除され、どちらにもアクティブが表示されないことに注意してください。私はそれを解決しようとしています。

4

2 に答える 2

0

実際、これは私が必要としていたもののようです。私はそれを解決しました。

st.click(function() {

        if (!$(this).hasClass('active')){
            $(this).addClass('active');
            sr.removeClass('active');
            dl.fadeOut(200, function() {
                $(this).addClass('tile').removeClass('row').fadeIn(600)
            });
        }
    });
    //add row class and remove tile
    sr.click(function() {
        if (!$(this).hasClass('active')){
            $(this).addClass('active');
            st.removeClass('active');
            dl.fadeOut(200, function() {
                $(this).addClass('row').removeClass('tile').fadeIn(600)
            });
        }
    });
于 2013-03-01T23:23:01.860 に答える