Javascript - 创 build 置 div 宽度的动态类

Question

我正在尝试创建一个有点动态的 html 类，它根据类末尾包含的数字设置宽度 %。注意:类名将始终以“gallery-item-”开头

示例:div.gallery-item-20 = 20% 宽度

我需要什么:

1. 获取类名并将每个类名转换为字符串以便能够读取末尾的数字(如果这一步甚至是必要的)

2. 将该数字转换为适用于具有该名称的每个类的宽度的百分比。

有人可能会问，为什么不单独创建一个类呢？我宁愿多一点控制，仅此而已。提前感谢您的所有回答。这是我当前的代码(我对 js 还很陌生):

$('.hollow-gallery-04').masonry({
  // options
  itemSelector: '.gallery-item'
});

var galleryItem = $('[class^="gallery-item-"]');

Object.values(galleryItem).forEach(function(item) {
  this.toString();
  console.log(galleryItem);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hollow-gallery-04">
  <div class="gallery-item-20">
    <img src="http://via.placeholder.com/350x150" alt="">
  </div>
  <div class="gallery-item-20">
    <img src="http://via.placeholder.com/500x300" alt="">
  </div>
</div>

Answer 1

我真的不认为需要任何 JS 来实现这一点。这应该使用纯 CSS 来完成，您担心失去的究竟是什么控件？

只需为每个 gallery-item-X 编写一个类，例如:

.gallery-item-20 { width: 20%; }

如果您不想为从 0 到 100 的每个数字写出它，您应该研究类似 Sass 的东西来生成您需要的 CSS。像这样:

@for $i from 0 through 100 {
    .gallery-item-#{$i} { width: #{$i}%; }
}

这里有一个很好的教程，也许可以帮助您开始使用 Sass:

https://scotch.io/tutorials/getting-started-with-sass