Question

我要做的是创建两个按钮;一个按钮显示数据的平铺视图，另一个按钮显示数据的行视图。我的代码设置如下：

    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在这里会很好用，但我不完全确定在哪里使用它。

编辑：有人问了一个小伙子，我发布了一个简单的工作：http://jsfiddle.net/wtyxd/3/

编辑：请注意，如果你点击它们，它会从另一个按钮中移除活动，但是如果你再次点击它，它也会从中移除活动状态并且不显示活动状态？我正在努力解决这个问题。

Answer 1

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

  if ($(this).hasClass('active-tile') && !d1.hassClass('row'))
  if ($(this).hasClass('active-row') && !d1.hassClass('tile'))

Answer 2

实际上这似乎是我需要的。我解决了

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)
            });
        }
    });

使用jquery的行和平铺视图列表

2 个答案: