javascript - 尝试替换所有 anchor 中的内容，但内容未被替换

Question

我正在尝试将所有内容替换为类 nav ( .nav a ) 后代的所有 anchor 中的相应 unicode 字符，具体取决于它是什么。

但是这个 javascript/jQuery 似乎什么也没做。

它没有显示任何错误，只是什么也没发生。

我做错了什么以及如何使用 javascript/jQuery 将某些文本替换为其他某些文本？

代码如下:

$(document).ready(function(){
    var navigationLinks = $('.nav a');
for(var i=0; i < navigationLinks.length; i++){
    var thisLink = navigationLinks.eq(i);
    switch(thisLink.html()){
        case "About":
            thisLink.html().replace(/About/g,'&#xe00f;');

        case "Work":
            thisLink.html().replace(/Work/g,'&#xe010');

        case "CV":
            thisLink.html().replace(/CV/g,'&#xe00c');

        case "Resume":
            thisLink.html().replace(/Resume/g,'&#xe00d;');

        case "down":
            thisLink.html().replace(/down/g,'&#xe00d;');

        case "Mail":
            thisLink.html().replace(/Mail/g,'&#xe011;');

        case "Dribbble":
            thisLink.html().replace(/Dribbble/g,'&#xe015;');

        case "GooglePlus":
            thisLink.html().replace(/GooglePlus/g,'&#xe012;');

        case "Facebook":
            thisLink.html().replace(/Facebook/g,'&#xe013;');

        case "Twitter":
            thisLink.html().replace(/Twitter/g,'&#xe014');

        default:
            thisLink.html().replace(thisLink.html(),thisLink.html());
    }
}
});

这里是我尝试过的代码的实际示例，但它不起作用。.nav 类中 anchor 内的文本仍然是原始文本而不是 unicode:https://dl.dropboxusercontent.com/u/270523/help/replace/index.html

Answer 1

html() 获取 innerHTML，而 html("string") 设置 innerHTML。您必须重新设置该值；您不能只对字符串调用 replace。

例如，您可以重做您的 case 语句以遵循此约定:

var myHtml = thisLink.html();
switch (myHtml) {
    case "About":
        thisLink.html(myHtml.replace(/About/g, ''));
        break;

或将其用于 .html() 调用:

thisLink.html(function (i, oldVal) {
    return oldVal.replace(/About/g, '');
});

此外，您需要为每个 case 包含 break，以防止执行下一个 block 。

此外，循环遍历匹配元素的 jQuery 方法是使用 .each()，而不是 for 循环(尽管仍然非常有效)。所以像这样:

$('.nav a').each(function () {
    var thisLink = $(this);
    var myHtml = thisLink.html();
    // The rest of the code...
});