7

我想使用 jQuery 在“”上设置 CSS反增量属性。.demo:before

问题是 jQuery 无法访问伪元素。另一个 SO 答案（我现在似乎找不到）建议设置一个数据属性，然后在 CSS 中使用该值，但这也不起作用。这是可以实现的吗？

简化示例：http: //jsfiddle.net/4h7hk8td/

HTML：

<ul class="demo">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

JS：

// 1) User Sets Unit Size
var myUnit = 100;

// 2) Unit size is saved via data attribute
$('.demo li').attr('data-unit', myUnit);

CSS：

.demo {
    counter-reset: list;
}

.demo li:before {
    /* 3) CSS gets data attribute and applies as the increment. Not working :( */
    counter-increment: list attr(data-unit);
    content: counter(list);
}
4

3 回答 3

3

您实际上可以使用 css 预处理器来编译 css。

我在下面给出一个使用 scss 的示例：

它实际上为传递的数字呈现不同的计数器增量。如果您已经知道用于递增的值，则此解决方案将起作用。例如，如果传递的值是100,200和300，那么您可以使用@each循环为这些已知数字编译 css。

如果您至少知道传递的值范围，则可以使用@for loop（在数量有限时使用）。

$values: 100, 200, 300;
@each $i in $values {
  .demo[data-num="#{$i}"]{
    & > li::before{
      counter-increment: list #{$i};
    }
  }
}

.demo {
    counter-reset: list;
}

.demo li:before {
    content: counter(list);
}

工作小提琴（将data-num属性值更改为 200 或 300）

这是编译好的css：

.demo[data-num="100"] > li::before {
  counter-increment: list 100;
}

.demo[data-num="200"] > li::before {
  counter-increment: list 200;
}

.demo[data-num="300"] > li::before {
  counter-increment: list 300;
}

.demo {
  counter-reset: list;
}

.demo li:before {
  content: counter(list);
}
于 2015-07-10T17:42:55.187 回答
1

为每个li而不是增加计数器：http :before: //jsfiddle.net/7vt0kf2c/。

var myUnit = 100;
$(".demo li").css("counter-increment", "list " + myUnit);
$("button").click(function(e) {
    $(".demo li").css("counter-increment", "list " + 200);    
});
于 2015-07-10T16:55:40.310 回答
-1

鉴于接受的答案，基本上没有 CSS 的净效果相同：

var myUnit = 100;
$('.demo').data('unit', myUnit);
$('.demo li').each(function () {
    $(this).text($('.demo').data('unit') * ($(this).index() + 1));
});
于 2015-07-10T18:17:14.833 回答