0

我想做的是创建两个按钮；一个按钮显示数据的平铺视图，另一个按钮显示数据的行视图。我将代码设置为：

    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>

我已经设置它隐藏数据列表片刻以便可以添加类，然后我添加行以更改数据的样式。

我最初的观点是我不完全确定如何在行处于活动状态时禁用磁贴按钮，反之亦然。我尝试使用 unbind，但这似乎永久禁用了这两个按钮。另一部分是，那里有很多代码，我觉得我不一定能有效地做到这一点。任何有关如何减少代码的建议将不胜感激。我觉得 toggleclass 在这里会很好用，但我不完全确定该去哪里。

编辑：有人要一个 jsfiddle，我发布了一个简单的东西：http: //jsfiddle.net/wtyxd/3/

编辑：请注意，如果您单击每个按钮，它会从另一个按钮中删除活动，但如果您再次单击它，它也会从中删除活动并且不会显示活动？我正在努力解决这个问题。

4

2 回答 2

0

http://jsfiddle.net/wtyxd/4/

  if ($(this).hasClass('active-tile') && !d1.hassClass('row'))
  if ($(this).hasClass('active-row') && !d1.hassClass('tile'))
于 2013-03-01T22:56:46.540 回答
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 回答