Question

我想创建一个jQuery，如果出现某个文本，那么它将添加一个类。

检查我的jsfiddle： http://jsfiddle.net/uREUT/130/

我已经删除了所有其他句子以使其一直有效，但如果单词“mener”在div中，我希望添加该类

var sentences = [
    'Jeg mener også at det er paent'];

var rand = sentences[Math.floor(Math.random() * sentences.length)];

$(document).ready(function () {
    $('#text').text(rand); {
        $("#text:contains('MENER')").addClass("#flaekke");
    }
});

.flaekke {
    background: #000;
    width: 200px;
    height: 200px;
}
#text {
    margin: 20px auto;
    width: 80%;
    font-size: 200%;
    text-align: center;
    z-index: 10;
    color: #000;
    text-transform:uppercase;
}

Answer 1

从类名中删除哈希（＃）。将类添加到包含文本的元素中也不需要太多代码。

这就是你应该需要的：

var sentences = [
    'Jeg mener også at det er paent'];

var rand = sentences[Math.floor(Math.random() * sentences.length)];

$(document).ready(function () {
    $("#text").text(rand);

    $("#text:contains('MENER'), #text:contains('mener')").addClass("flaekke");
});

Here's a fiddle.

Answer 2

我对您的代码进行了这些更改以使其正常工作：

在您已有的文本中查找字符串，而不是在DOM中（更简单，更快）。
从班级名称

#

确保您正在寻找合适的案例。实际的“mener”文本是小写的，即使你有一个文本转换以大写形式显示它。
确保您的CSS优先级正确无误。我必须在.flaekke规则之后移动#text规则并添加一个!important以确保所需的`.flaekke规则在我需要时生效。请记住，ID指定的CSS规则具有比类更高的优先级，因此如果您希望该类具有优先级，则必须修改规则以实现此目的。

您似乎可以检查已有文本的单词 - 您不必查看DOM。此外，您需要从班级名称中删除＃：

$(document).ready(function () {
    $('#text').text(rand);
    if (rand.indexOf("mener") !== -1) {
        $('#text').addClass("flaekke");
    }
});

工作演示：http://jsfiddle.net/jfriend00/s5FCL/

Answer 3

$(document).ready(function () {
    $('#text').text(rand);
    $("#text:contains('MENER')").addClass("flaekke");
});

这应该有效。

Answer 4

除了错误的类名，您的具体问题来自于文本实际上包含“mener”而非“MENER”的事实。 jQuery：contains是区分大小写的，不会考虑你的大写变换。

这是一个有效的解决方案： http://jsfiddle.net/uREUT/136/

$(document).ready(function () {
    $('#text').text(rand);
    $("#text:contains('mener')").addClass("flaekke");
});

Answer 5

正则表达式很有趣，所以这是一个使用它们的答案：

JS FIDDLE

var sentences = [
    'Jeg mener også at det er paent'];

var rand = sentences[Math.floor(Math.random() * sentences.length)];

$(document).ready(function () {
    $('#text').text(rand); {
        if(new RegExp("mener").test(rand)){
            $("#text").addClass("flaekke");
        }
    }
});

PS。如果您只想添加一个名为flaekke的类，您不需要id选择器#或类选择器.，只需键入您想要的类的名称添加并让jquery发挥其魔力。

Answer 6

为了完整起见，我创建了一个小提琴，可以在单击按钮时随机化文本，并在mener不存在的情况下删除该类。

See working jsFiddle demo

的jQuery

var $text = $('#text'),
    sentences = 
    [
        'Jeg mener også at det er paent',
        'Jeg også at det er paent',
        'Jeg mener paent'
    ];

$("#randomize-button").on("click", function ()
{
    var rand = sentences[Math.floor(Math.random() * sentences.length)];

    if (rand.toLowerCase().indexOf('mener') != -1)
        $text.addClass("flaekke");
    else
        $text.removeClass("flaekke");

    $text.text(rand);   
})
.click();

CSS

.flaekke 
{
    background: black;
    color: white;
}

#text 
{
    width: 80%;
    margin: 20px auto;
    padding: 10px;
    font-size: 200%;
    text-align: center;
    z-index: 10;
    text-transform:uppercase;
    border: solid 1px black;
}

jQuery - 如果是某些文本，那么addClass

6 个答案:

See working jsFiddle demo

的jQuery

CSS