Question

如何根据div宽度添加/删除类？我尝试了一些代码，但我不知道jquery代码。我喜欢根据antoher div宽度添加div类。我只需要添加这样的类。如果容器小于600px＆＃34;添加类＆＃34;内容div其他＆＃34;删除类＆＃34;来自内容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() 功能。它将类名作为第一个参数，并使用可选的第二个布尔参数来表示应添加或删除类名。您可以找到文档here

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

Answer 3

即使你的问题是一个JS相关的问题，事实上CSS也可以处理这个问题，就像其他野兽一样（主要是）！

CSS允许您使用媒体查询根据视口的宽度调整内容大小。

这样做的好处是浏览器将在渲染引擎中为您处理此问题，而不是在您的更改和渲染引擎之间使用JS。

主要的缺点是您无法根据元素 B 定义元素 A 的宽度，但遗憾的是锁定为使用视口作为指标。

在我解释你为什么想要使用CSS之前，我想指出为什么你不想要在可能的情况下使用JS。< / p>

jQuery.resize事件处理程序在浏览器中不一致地触发，并且通常会触发很多次。

这会导致您的滚动阻塞并使您的网页感到迟钝。如果您的用户不喜欢任何东西，那么滚动是由他们甚至不知道哪些会减慢您的速度控制的事实。

对于CSS解决方案，media query看起来像这样：

.my-selector {
    width: 900px;
}

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

将代码包装在排序条件中，使您可以非常灵活地操作页面上的元素。

上面的代码中发生的情况是，当解析器读取CSS时，它会看到第一个选择器不在媒体查询中，因此它应用width: 900px;然后它会看到媒体查询并看到{的另一个规则{1}} 然而当屏幕处于我们在my-selector规则中定义的宽度时，它将仅应用该规则。当你在幕后调整CSS处理事物时，它会在这种情况下比JS快得多。

我不确定它是否真的适用于你的情况，但如果你的容器的大小是由视口而不是父元素确定的，那么这应该是可能的，我认为至少可以告诉你一个很好的玩法。元素维度。

此外，您可以使用@media ...例如将@media更改为all并为元素设置print，从而使网页打印更友好 - < strong>保存墨水^。^ 这是媒体查询的一般特性之外的额外补充。

希望它有所帮助，祝你好运，如果你想让你的网页快5倍;）

jQuery Add＆amp;删除Class Div Width

3 个答案: