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

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

修改

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

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

JSFiddle

Answer 2

    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所使用的所有类并创建类的方法，但是您需要某种规则来构建{{1的实际类名称之外的样式}}

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);

})

P.S。我很抱歉这些错误 - 英语不是母语

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

3 个答案: