jQuery添加和刪除類Div寬度

Question

如何根據div寬度添加/刪除類？ 我嘗試了一些代碼，但是對jquery代碼一無所知。 我想根據另一個div寬度添加div類。 我只需要像這樣添加類。 如果容器小於600像素，則“將類添加到內容div”，否則將“將類從內容div刪除”。 這些是我的代碼；

<div class="container">
  <div class="content"></div>
</div>

$(window).resizeboxes(function() {
if ($(".container").width < 600){
    $( ".content" ).addClass( ".content_600" );
    }
});
else{
  removeClass('.content_600')
}
$(window).trigger('resizeboxes');

Answer 1

盡管代碼稍有更改，但這仍然有效。 語法也存在一些問題，因此我已更正了這些問題（例如，else語句被放錯了地方）。 這是一個工作示例：

https://jsfiddle.net/vt0nbx36/3/

這是代碼：

var resizeboxes  = function() {
    if ($(".container").width() < 600)
    {
        $(".content").addClass("content_600");
    }
    else
    {
        $(".content").removeClass("content_600")
    }
};

resizeboxes();

$(window).resize(function(){
    resizeboxes();   
});

Answer 2

正是為此需要，您具有jQuery的.toggleClass()函數。 它以類名作為第一個參數，並使用可選的第二個布爾型參數來聲明是否應添加或刪除類名。 您可以在這里找到文檔

$(".content").toggleClass("content_600", ($(".container").width() < 600));

Answer 3

即使您的問題是與JS有關的問題，實際上CSS也可以像其他野獸一樣（大多數）來處理此問題！

CSS允許您使用媒體查詢來根據視口的寬度調整內容的大小。

這樣做的好處是，瀏覽器將在呈現引擎中為您處理此問題，而不是在更改和呈現引擎之間使用JS。

主要缺點是您不能基於元素B定義元素A的寬度，但不幸的是，只能使用視口作為指示器。

在我解釋為什么你想使用CSS我想指出為什么你不希望盡可能使用JS這一點。

jQuery.resize事件處理程序會在瀏覽器中不一致地觸發，並且通常會觸發很多次。

這會導致滾動阻塞，並使您的網頁顯得不整潔。 如果您的用戶有什么不滿意的地方，那就是滾動是由他們什至不知道的東西控制的，這使您放慢了速度。

對於CSS解決方案， 媒體查詢如下所示：

.my-selector {
    width: 900px;
}

@media all and (max-width: 600px) {
    .my-selector {
        width: 600px;
        ...
    }
}

您將代碼包裝在某種條件中 ，該條件使您可以靈活地處理頁面上的元素。

上面這段代碼中發生的事情是，當解析器讀取CSS時，它會看到第一個選擇器不在媒體查詢中，因此它應用width: 900px; 然后它會看到媒體查詢並看到my-selector的另一條規則， 但是 只有當屏幕的寬度等於我們在@media ...規則中定義的寬度時，它才會應用該規則。 調整大小時，CSS在后台處理的內容有所不同，因此在這種情況下，它比JS快得多。

我不確定它是否真的適用於您的情況，但是如果您的容器是根據視口而不是父元素來確定大小的，那么這應該是可能的，並且我想至少向您展示一種使用元素尺寸的好方法。

另外，您可以使用@media例如通過更改all要print的內容並設置background-color: transparent來使網頁打印友好，例如設置元素的background-color: transparent - 節省墨水^。^ ，這是常規設置之外的額外功能媒體查詢真棒。

希望對您有所幫助，如果您希望將網頁速度提高5倍；）