Question

嗨，我有一个名为“ fx -...”的变量类，我想添加一个不带后缀“ fx-”的类。例如“ fadeUp”。我该怎么办？

<h1 class="way-animate fx-fadeUp">Title</h1>

Answer 1

您的问题尚不清楚，我想您想知道“如何添加动态类名”。能请您详细说明一下吗？

假设您有一个变量

let cls = 'fx-fadeUp';

您可以使用这样的javascript轻松删除fx-

cls = cls.substr(3, cls.length); // now cls = 'fadeUP'

然后您还可以使用javascript这样添加类

document.querySelector('.way-animate').classList.add(cls);

或，如果您想选择所有以fx-开头的类，则可以使用css也可以这样做

[class^="fx-"] {
    /* Your css styles */   
}

AND / OR ，如果您使用jQuery，则有内置函数用于添加和删除类：addClass和removeClass

$(selector).addClass('className');
$(selector).removeClass('className');

Answer 2

尝试一下：

var prefix = "fx-";
var suffix  = "fadeUp";
var strClass = prefix+suffix;
$("h1").addClass(strClass);

Answer 3

使用JQuery，您可以使用addClass函数：

// locate element
var h1el = $('h1.way-animate');

// add css class
h1el.addClass('another-class');

参考号：https://api.jquery.com/addClass/

Answer 4

我假设您想用该类的其他部分替换任何fx- *类。

首先，我们获得H1的类别列表，然后循环播放，找到匹配项后，我们便会做我们想做的事情。好吧，如果您想保留它，只需删除我的代码中的removeClass行即可。

var classList = $('h1').attr('class').split(/\s+/);
$.each(classList, function(index, item) {
    if (item.includes('fx-')) {
        $("h1").removeClass (item);
        var newclass=item.replace(/fx-/gi, "");
        $("h1").addClass(newclass);
    }
});

[已更新]您可以在这里看看：https://jsfiddle.net/k86oqwn9/1/

向元素添加动态类

4 个答案: