Question

我正在尝试创建一个有点动态的html类，它根据类末尾包含的数字设置宽度％。注意：班级名称将始终以＆＃34; gallery-item - ＆＃34;

开头

示例：div.gallery-item-20 = 20％宽度

我需要什么：

获取类名并将每个转换为字符串，以便能够在最后读取数字（如果这一步甚至是必要的）
将该数字翻译成适用于具有该名称的每个类的宽度的％。

有人可能会问，为什么不单独上课呢？我宁愿多一点控制，这就是全部。提前感谢您的任何和所有答案。这是我目前的当前代码（我对js来说相当新）：

＆＃13;

ThingBox<T>

＆＃13;

final

＆＃13;

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

Answer 2

这是一种方法：

var getValue = function(classString) {
  return parseInt(classString.substring(classString.lastIndexOf('-') + 1), 10);
}

galleryItem.each(function() {
  $(this).css(
    'width',
     getValue(this.className) + '%'
  );
});

工作示例https://jsfiddle.net/ytL4g8ps/

Javascript - 创建设置div宽度的动态类

2 个答案: