0

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

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

我的类名为 .condDetail 并应用于页面顶部的 div，具有 CSS 属性可见性：隐藏和背景位置：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。如果条件不佳，请将类更新为可见性：可见和背景位置：0px 240px。

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

对不起，我是新手。我知道我可以像这样更新课程：

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

....但是我花了几个小时在 Firebug 上试图弄清楚如何根据该 div 中的文本来改变它....

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

任何帮助将不胜感激，直到我能更好地学习如何自己做这件事。

4

4 回答 4

3

You can use contains to check, 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

于 2013-07-22T17:44:36.460 回答
1

为什么不根据条件向 div 本身添加一个类？

喜欢

<div class="anyotherclass good-condition">Good Condition</div>
于 2013-07-22T17:39:17.150 回答
0

As to your question :

  • Using jQuery, can I update CSS in a class if text appears on the page somewhere?, the answer is : yes.
  • how to get it to change based upon the text in that div ? : jQuery allows you to get the text of a div with the text() method, example : $('div').text() which you can later put in a variable and use in conditionals (see ?). Later on, the best way to go, I think, is by adding some classes with the addClass method, and eventually removing some classes with removeClass.
于 2013-07-22T17:44:34.877 回答
0

另一种方法是查看项目文本中短语的索引。工作小提琴http://jsfiddle.net/6cGgx/1/

$(document).ready(function(){
    if($("#ProductDetail_ProductDetails_div span").text().indexOf("Poor Condition") !=-1 )
    {alert(true) 
    $(".condDetail").css("visibility", "visible");
    $(".condDetail").css("background-position", "0px -480px");
    }else if($("#ProductDetail_ProductDetails_div span").text().indexOf("Good Condition") !=-1 ){//stuff 
        alert("foo"); 
    }else if($("#ProductDetail_ProductDetails_div span").text().indexOf("Bad Condition") !=-1 ){//stuff 
        alert("foo"); 
    }
})

我个人更喜欢使用text()to，html()因为您使用的是文本而不是 html。

于 2013-07-22T17:47:37.607 回答