jQuery - 动态创建类以匹配现有类

Question

我有 3 个 div

<div class="box opacity1 red"></div>
<div class="box opacity.5 green"></div>
<div class="box opacity0 blue"></div>

我想让 jQuery 查看页面，查看这些类，然后创建三个不同的类。

opacity1{
opacity: 1
}

opacity.5{
opacity: 0.5
}

opacity0{
opacity: 0
}

因此，当用户向元素添加类时，例如“opacity75”。我希望 jQuery 脚本找到“不透明度”，然后找到附加的数字，然后使用该数字创建匹配的 css 类，例如。 opacity75{不透明度：0.75}

我对 JS 知之甚少。我需要一些帮助才能让我朝着正确的方向前进。 这可以节省大量的 CSS 类。

Answer 1

    var stylestring = "<style type=\"text/css\">";
    $("div").each(function() {
      $.each($(this).attr("class").split(" "), function () {
        var class = this + " {";
        //add style to string
        class += "}";
        stylestring += class;
      });
    });
    stylestring += "</style>";
    $(document.body).prepend($(stylestring));

这将是我在整个页面中遍历 div 中使用的所有类并创建类的方法，但是您需要某种规则来根据 //add style to string 处的实际类名构建样式

Answer 2

我不确定如何在 jQuery 中创建 CSS 类，但这里有一段代码可以满足您的期望

编辑

$(function() {
    $('.opacity').each(function() {
        $(this).css('opacity', $(this).data('opacity')); 
    });
});

并将data-opacity="XX" 添加到您的<div> 标签中。

JSFiddle

Answer 3

1) 你的例子，它不是通过 js 设置 css 的最佳方法
2）我认为任务是为元素设置一些样式，因此不一定要创建类。 jquery 可以通过.css("property","value") 方法为元素设置样式
3) 代码示例，可能有效

// get all elements which contains 'opacity' in class name 
var opacityElems = $( "div[class*='opacity']" );

var elemClassName;
var elemOpacityValue;

// cycle through all this elements
opacityElems.each(function(i,elem) {

    // write the class name of the current element as a string
    elemClassName = $(elem).attr('class');

    // remove first 7 simbols, so only last numbers left
    elemOpacityValue = elemClassName.substring(7, elemClassName.length);

    // because obtained in the previous one step is a string, then give her number
    // ie "0.12" to 0.12
    elemOpacityValue *= 1;

    // set style to element
    $(elem).css("opacity",elemOpacityValue);

})

附言我很抱歉这些错误 - 英语不是母语