行和平鋪視圖列表與jquery

我想要做的是創建兩個按鈕;一個按鈕顯示數據的平鋪視圖，另一個顯示數據的行視圖。我已經設置了代碼是這樣的：行和平鋪視圖列表與jquery

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>

我有它設置，它隱藏了一會兒數據列表，以便可以添加類，然後我添加行以更改數據的樣式。

我的原始點是我不完全確定如何在行激活時禁用磁貼按鈕，反之亦然。我嘗試使用解除綁定，但似乎永久禁用這兩個按鈕。另一部分是，那裏有很多代碼，我覺得我不一定有效地做到這一點。任何關於如何減少代碼的建議將不勝感激。我覺得在這裏使用toggleclass會很好用，但我不完全確定它應該放在哪裏。

編輯：有人問了的jsfiddle，我貼一個簡單的東西的工作：http://jsfiddle.net/wtyxd/3/

編輯：請注意，如果你點擊每個從另一個按鈕清除活性，但如果你點擊它再一次，它也從中刪除活動，並且不顯示任何活動？我試圖解決這個問題。

來源

2013-03-01 stepquick

你有一個頁面或CSS或小提琴 - 這將有很大的幫助 – 2013-03-01 22:19:11

編輯：更新，http://jsfiddle.net/wtyxd/3/ – stepquick 2013-03-01 22:31:54

像這樣.row節{ 浮動：剩下; } – 2013-03-01 22:37:40

其實這似乎是我所需要的。我解決了它。

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-01 23:23:01 stepquick

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

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

來源

2013-03-01 22:56:46

希望這個作品，我認爲這是你想要的功能 – 2013-03-01 22:57:11

更新：其實它看起來你用d1而不是dl。與hassClass一樣。它只是拋出錯誤。 – stepquick 2013-03-01 23:04:06

試試這個http://jsfiddle.net/wtyxd/9/ – 2013-03-01 23:53:17

行和平鋪視圖列表與jquery

回答

相關問題