如何使用jquery根据屏幕宽度更改div的类[重复]

Question

我在我的 HTML 页面上显示产品。有些产品有大细节，有些产品有小细节。当我展示这些产品时，具有大细节的产品div 比具有小细节的产品具有更高的高度。为了解决这个问题，我为div 分配了高度，但它不起作用，因为当我在移动设备中打开我的页面时，产品的详细信息会从其div 溢出。然后我尝试使用媒体查询更改div 的类：如果宽度col-md-6 更改为col-md-12。我使用jquery 进行了此更改，但它只影响第一个div。 这个问题的标准解决方案是什么？。

$(window).resize(function() {
  if ($(window).width() < 991) {
    alert("window");
    $( "product612" ).removeClass( "col-md-6" ).addClass( "col-md-12" );
    $("product612").toggleClass('col-md-6 col-md-12');
  }
});

.product{
  background-color: rgba(92, 90, 90, 0.096);
  word-wrap:break-word;
  position: relative;
  text-align: center;
  padding: 40px 20px;
  margin: 15px 0px;
  height: 433.4px !important; 
}


.product:after {
  content: "";
  background-color: rgba(2, 2, 2, 0.781);
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0%;
  z-index: -1;
  -webkit-transition: 0.2s width;
  transition: 0.2s width;
  
}

.product:hover p{
  color: white !important;
}

.product:hover:after 
{
  width: 100%;
  height: auto;
}

.product p{
  color: rgb(80, 80, 80) !important;
  font-size: 17px;
  line-height: 18px;
  font-weight: 500;
  font-family: Avant Garde, Avantgarde, Century Gothic, CenturyGothic, AppleGothic, sans-serif;
}
 
.product>img {
  height: 150px;
  width: 250px;
  margin: 0px auto 12px auto;
  margin-left: auto;
  border-radius: 15%;
}

<div class="container" >
    <div class="row">

      <div class="section-header text-center" >
          <h1 class="glow title">Products</h1>
      </div>

      {% for product in products %}
      
        <div id="product612" class="col-md-6 col-sm-12 col-xs-12">
            <div class="product">
            <img src="{{product.image.url}}" class="img-responsive " alt="product picture">
            <h4>{{product.name}}</h4>
            <p>{{product.detail}}</p><br>
            </div>
        </div>
      {% endfor %}
    </div>
  </div>

Answer 1

在回答你实际提出的问题之前先做两件事：

1. Bootstrap 的网格系统应该可以避免做这样的事情，所以你可能想用MCVE 发布一个关于你正在做什么的新问题，并询问如何避免更改@987654324 @类。
2. ids 必须在文档中是唯一的，所以这是您需要解决的第一件事。

---

不过，回答您提出的问题：

你说过：

我使用 jquery 进行了此更改，但它只影响第一个 div。

但是您显示的代码使用了

$( "product612" ).removeClass( "col-md-6" ).addClass( "col-md-12" );
$("product612").toggleClass('col-md-6 col-md-12');

它不会做任何事情，因为$("product612") 不会匹配任何东西（你的意思是$("#product612")，如果你看到一个变化，我想你一定曾经使用过它）。

使用类而不是id，然后在您的resize 函数中：

$(window).resize(function() {
  var isNarrow = $(window).width() < 991;
  $(".the-class")
      .toggleClass("col-md-6", !isNarrow)
      .toggleClass("col-md-12", isNarrow);
});

您可以为此使用matchMedia 而不是resize，因此您只在大小更改确实重要时才运行回调，而不是在每次微小的调整大小更改时运行，例如：

(function() {
    function widthUpdate(mqle) {
          $(".the-class")
              .toggleClass("col-md-6", !mqle.matches)
              .toggleClass("col-md-12", mqle.matches);
    }
    var mql = window.matchMedia('(max-width: 990px)');
    mql.addListener(widthUpdate);
    widthUpdate(mql);
})();

当你第一次连接它时它不会触发监听器，所以你必须手动完成。

---

（鉴于 Pete 识别的 duplicate 和 Bootstrap 的东西，我一开始删除了它。但后来决定也许它会以后对某人有用。不想不过，从中获得任何代表，所以我将其标记为社区 Wiki。）