如何在運行時交換jquery css

我在所有行中都有一個帶有向上和向下按鈕的表，並且我想要在表中的各個方向上向上/向下移動行的onclick。我能夠做到這一點，但問題是我有一個替代行的樣式表，我不想隨着行移動。但目前的功能移動CSS也看起來很疲憊的頁面上。有人可以讓我知道我該如何停止移動CSS。我的代碼是 -
如何在運行時交換jquery css

 $(document).ready(function(){ 
    $(".up,.down").click(function(){ 
     var row = $(this).parents("tr:first"); 
     if ($(this).is(".up")) { 
      row.insertBefore(row.prev()); 
     } else { 
      row.insertAfter(row.next()); 
     } 
    }); 
});

我必須檢查移動行是否已經到了CSS然後它應該被剝離並分配到新行。

來源

2012-01-13 Sachin

你是如何跟蹤奇數和偶數行之間的差異？ – 2012-01-13 06:38:25

想知道，這似乎有點接受

$(document).ready(function(){ 
$(".up,.down").click(function(){ 
    var row = $(this).parents("tr:first"); 
    var new_class=''; 
    var neigbour_class=''; 
    if (row.hasClass('odd')) { 
     new_class='even'; 
     neighbour_class='odd'; 
    } 
    else { 
     new_class='odd'; 
     neighbour_class='even'; 
    } 
    if ($(this).is(".up")) { 
     row.insertBefore(row.prev()); 
     row.removeClass().addClass(new_class); 
     row.prev().removeClass().addClass(neighbour_class); 
    } else { 
     row.insertAfter(row.next()); 
     row.removeClass().addClass(new_class); 
     row.next().removeClass().addClass(neighbour_class); 
    } 
}); 
});

來源

2012-01-13 06:58:53 optimusprime619

是的，這是一個小改進 - row.insertBefore(row.prev()); row.removeClass().addClass(new_class); row.prev().removeClass().addClass(neighbour_class); – Sachin 2012-01-13 08:52:25

如果我正確理解你，建立你的風格是這樣的：

 tr:nth-child(even) { } 

     tr:nth-child(odd) { }

現在，當你移動行，樣式將不會搞砸。請注意，這在古代瀏覽器中可能不起作用。如果你必須支持IE7，你可能需要做更多的工作。

來源

2012-01-13 06:38:55

我認爲這在每個瀏覽器中都是不可能的。其他的jquery解決方案的確是在你的行元素 – Grrbrr404 2012-01-13 06:41:37

@ Grrbrr404上使用addClass和removeClass方法。我添加了對該影響的編輯。那麼IE 8和下去了嗎？ – 2012-01-13 06:46:28

試試這個

$(document).ready(function(){ 
    $(".up,.down").click(function(){ 
     var row = $(this).parents("tr:first"); 
     if ($(this).is(".up")) { 
      row.insertBefore(row.prev()); 
     } else { 
      row.insertAfter(row.next()); 
     } 

     $("table tr:odd").removeClass('even odd').addClass('odd'); 
     $("table tr:even").removeClass('even odd').addClass('even'); 
    }); 
});

閱讀odd selector和even selector

來源

2012-01-13 06:53:19 Dau

如何在運行時交換jquery css

回答

相關問題