jquery - 如果文本出现在页面某处，我可以使用 jQuery 更新类中的 CSS 吗？

Question

如果页面上出现特定文本，如何修改类的 CSS？

具体来说，我有一个类可以控制 Sprite 图像的可见性和位置，我想根据页面上 div 中的文本使用 jQuery 对其进行更新。

我的类名为 .condDetail 并应用到页面顶部的 div，具有 CSS 属性 visibility:hidden 和 background-position:0px 0px。

下面的 div 正是我必须使用的 div，我想控制类中的 CSS。

<div id="ProductDetail_ProductDetails_div">
   <span itemprop="description">This is an item in Poor Condition</span>
</div>

此 div 将定期有不同的文本，但始终会声明“状况不佳”、“状况良好”或“状况良好”。

我试图让我的类根据 div 所说的条件进行更新。

如果条件良好，请将类更新为可见性:可见和背景位置:0px 120px。如果条件不佳，请将类更新为 visibility:visible 和 background-position: 0px 240px。

....依此类推，具体取决于 div 中显示的条件。

对不起，我是新手。我知道我可以像这样更新类(class):

$(".condDetail").css("visibility", "visible");
$(".condDetail").css("background-position", "0px -480px");

....但我花了几个小时使用 Firebug 试图弄清楚如何让它根据该 div 中的文本进行更改....

我似乎无法拼凑出如何构建 jQuery。

在我能够更好地学习如何自己完成此操作之前，我们将不胜感激任何帮助。

Answer 1

可以使用contains来检查，Example

JS

$('#check').click(function() {
    console.log('c');
    $('.condDetail').each(function() {
        console.log('in');
        var el = $(this);
        var text = el.text();
        console.log(text);
        if (text.contains('Good Condition')) {
            //el.show();
            el.css('color', 'green');
        } else if (text.contains('Poor Condition')) {
            //el.hide();
            el.css('color', 'red');
        }
    });
});

HTML

<div class="condDetail">
    some text Good Condition more text
</div>
<div class="condDetail">
    some text
</div>
<div class="condDetail">
    some text Poor Condition
</div>

<button id="check">Check</button>

jsFiddle