时间戳

首页 > 解决方案 > 更改未来实例的 CSS

jquery - 更改未来实例的 CSS

问题描述

我显示图像，默认情况下它们按两个连续排序（50% 宽度），我有一个 jQuery 选项可以连续显示 4 个。在您尝试加载更多图像（使用无限滚动）之前，它会按预期工作。

即使我通过单击 jQuery 按钮更改了 css，“下一个/未来的实例”将再次具有 50% 的宽度。如何确保未来的实例将具有更新的 CSS？

$('.sortbutton4').click(function() 
{ 
    $('.imagecontainer').css({"width": "24.5%", "margin": "0.25%"}); 
    $('.sortbutton4').css({"display": "none"});
    $('.sortbutton2').css({"display": "block"});
});

$('.sortbutton2').click(function() 
{ 
    $('.imagecontainer').css('width', '48.5%');
    $('.imagecontainer:nth-child(odd)').css({"margin-left": "1%", "margin-right": "0.5%"});
    $('.imagecontainer:nth-child(even)').css({"margin-left": "0.5%", "margin-right": "1%"});
    $('.sortbutton2').css({"display": "none"}); 
    $('.sortbutton4').css({"display": "block"});
});

标签： jquerycss

解决方案

您可能应该使用 CSS 类。就像是：

._4-in-a-row .imagecontainer {
  width: 24.5%;
  margin: 0.25%;
}
.imagecontainer {
  width: 48.5%;
}

等等...对于nth-child选择器

然后只需更改包装图像容器的元素的类。


<div class='images'>
  <div class="imagecontainer">
    <!-- ..where your dynamically fetched/generated image appears.. -->
  </div>
  <div class="imagecontainer">
  </div>
  <div class="imagecontainer">
  </div>
</div>

function toggleImageSize() {
   var imageRow = document.querySelector('.images');
  // toggle .4-in-a-row class
   imageRow.classList.contains('_4-in-a-row') ?
    imageRow.classList.remove('_4-in-a-row') : imageRow.classList.add('_4-in-a-row');
  // the rest of your JS for toggling the button visibility
}

推荐阅读