javascript - CSS 列表样式类型使用属性值

Question

我有一些像这样的 html 元素

<div class="col-md-3">
    <div class="olListPallette" data-numberStyle="counter(count, lower-alpha) '. '">type1</div>
</div>
<div class="col-md-3">
    <div class="olListPallette" data-numberStyle='counter(count, upper-alpha) ". "'>type2</div>
</div>
<div class="col-md-3">
    <div class="olListPallette" data-numberStyle='counter(count, lower-alpha) ") "'>type3</div>
</div>

我想做的是当点击一个 div 时，该属性应该设置为 <ol> .它在 css 中有一个计数器，新的列表样式应该应用于列表项。这是我的 list

<ol>
    <li>first</li>
    <li>second</li>
    <li>thirs</li>
</ol>

我的js是

$('.olListPallette').click(function(){
    $('ol').attr('data-numberStyle',$(this).attr('data-numberStyle'));
});

我的CSS:

ol {
list-style: none !important;
counter-reset: count;
}
ol li:before {
content: attr(data-numberStyle);
counter-increment: count;
}

问题是属性data-numberStyle没有得到计数器值。如果我像 content: counter(count, lower-alpha) ") " 一样直接给出值然后它会工作。但是我需要在css中使用属性值。

此外，在其他情况下，我只需要使用分隔符。所以，如果我在 css 中使用计数器，我需要传递分隔符。

示例:

content: counter(count) + attr(data-numberStyle); // this is not working
// Something like this counter(count) + ", ".
// <div data-numberStyle = ", ">

这是我的 Fiddle .如果我的问题不清楚，请随时提问。我希望你明白。如何在CSS中使用这个属性值？

Answer 1

鉴于数据属性应该是样式，想到一个想法，就是直接在header中修改一个'style'标签来应用:在css之前，请查看更新的Fiddle示例:

http://jsfiddle.net/cHhJ5/3/

Javascript:

var $style;
$(document).ready(function(){
    $('.olListPallette').click(function(){
        if(!$style){
             $style = $('<style id="listStyle">ol li:before {'+$(this).attr("data-numberStyle")+' ";}</style>');
             $("head").append($style);
        }else{
             $style.html('ol li:before {'+$(this).attr("data-numberStyle")+' ";}</style>');
        }
    });
});

希望对你有帮助

编辑(解释):

:before(和其他伪选择器，如 :after)不能直接用 jQuery 修改，因为它们不是 DOM 的一部分。

因此，一个可能的变通方法可能是直接修改header中的一个style标签来达到修改列表样式的目的。

但是，我觉得在 header 中添加样式标签并将样式直接放在数据属性中有点 hackish，我宁愿使用预定义的 css 类并通过 javascript 对其进行评估:

http://jsfiddle.net/cHhJ5/4/

Html，使用类名作为数据属性。值:

<div class="olListPallette" data-numberStyle="low">type1</div>

Css，定义具有所需样式的类:

ol.low li:before {
    content: counter(count, lower-alpha) ") ";
    counter-increment: count;
}

ol.upp li:before {
    content: counter(count, upper-alpha) ") ";
    counter-increment: count;
}

Javascript，只需在点击时设置相关类:

$(document).ready(function(){
    $('.olListPallette').click(function(){
        $("ol").removeClass();
        $("ol").addClass($(this).attr("data-numberStyle"));
    });
});