jquery - jQuery addClass 到 h1

Question

我正在尝试根据 h1 元素内的文本向 h1 元素添加一个类。

var title = $("h1").text();
if (title == "Welcome") {
$("h1").addClass("hide");
}

http://jsfiddle.net/4LjnT/

Answer 1

我建议：

$('h1').addClass(function(){
    return $(this).text() == 'Welcome' ? 'hide' : '';
});

JS 小提琴演示。

或者，为了减少对 jQuery 的不必要调用：

$('h1').addClass(function(){
    return (this.textContent || this.innerText) == 'Welcome' ? 'hide' : '';
});

JS 小提琴演示。

而且我可能有几分钟的时间可以杀死，这导致了这个简单的 JavaScript 替代方案：

Object.prototype.textToClass = function(needle,classToAdd){
    var len = this.length,
        classes = [],
        txt;
    for (var i=0; i<len; i++){
        txt = this[i].textContent || this[i].innerText;
        if (txt == needle){
            classes = this[i].className.split(/\s/);
            classes.push(classToAdd);
            this[i].className = classes.join(' ');
        }
    }
    return this;
};

document.getElementsByTagName('h1').textToClass('Welcome','hide');

JS 小提琴演示。

参考：

• jQuery
  • addClass().
• 纯 JavaScript：
  • Array.length.
  • Array.join().
  • Array.push().
  • 条件运算符/三元运算符。
  • Element.className.
  • Object.prototype.
  • String.push().

Answer 2

jQuery 未在此小提琴中加载。

此外，您没有将代码包装在document.ready()函数中，因此存在可能无法以您想要的方式执行的风险。确保从右侧的“Frameworks & Extensions”下拉列表中选择 jQuery。此外，请始终记住检查浏览器的控制台以查看是否有错误，这是对此类事情的一个很好的健全性检查。一直发生在我身上:)

JS

$(function(){

  var title = $("h1").text();

  if (title === "Welcome") {
    $("h1").addClass("hide");
  }

}); // end ready