jquery - 错误图像调整大小从 javascript 更改类

Question

我有一个带有一列的水平滑块（图 2）

<div id="portfolio_horizontal_container" class="onecolumn">

如果我做：

<div id="portfolio_horizontal_container" class="two-ver-columns">

并刷新浏览器，滑块现在有两列（图 3）

但如果我做出改变js：

  $("#verPrincipal").click(function() {
        $("#portfolio_horizontal_container").removeClass();
        $("#portfolio_horizontal_container").addClass("onecolumn");
    })

    $("#verCuadricula").click(function() {
        $("#portfolio_horizontal_container").removeClass();
        $("#portfolio_horizontal_container").addClass("two-ver-columns");
    })

图像调整不正确（图 1）

我不明白为什么一方面它可以让我改变，但另一方面却不能

捕获

演示：

$("#verPrincipal").click(function() {
  $("#portfolio_horizontal_container").removeClass();
  $("#portfolio_horizontal_container").addClass("onecolumn");
})

$("#verCuadricula").click(function() {
  $("#portfolio_horizontal_container").removeClass();
  $("#portfolio_horizontal_container").addClass("two-ver-columns");
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <button id="verPrincipal">One Column</button>&nbsp;&nbsp;
  <button id="verCuadricula">Two Column</button>
</div>

<div id="portfolio_horizontal_container" class="onecolumn">
aaaa
</div>

标签： jquerycss

Answer 1

解决了：

$(window).trigger('resize');

>

$("#verPrincipal").click(function() {
  $("#portfolio_horizontal_container").removeClass();
  $("#portfolio_horizontal_container").addClass("onecolumn");
  $(window).trigger('resize');
})

$("#verCuadricula").click(function() {
  $("#portfolio_horizontal_container").removeClass();
  $("#portfolio_horizontal_container").addClass("two-ver-columns");
  $(window).trigger('resize');
})