如果页面上出现特定文本,如何修改类的 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。
在我能够更好地学习如何自己完成此操作之前,我们将不胜感激任何帮助。
最佳答案
可以使用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>
关于jquery - 如果文本出现在页面某处,我可以使用 jQuery 更新类中的 CSS 吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17793861/