Question

我正在尝试使用类nav的后代（.nav a）中所有锚点中的相应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类中锚点内的文本仍然是原始文本而不是unicodes：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, '&#xe00f;'));
        break;

或将其用于.html()电话：

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

此外，您需要为每个break添加case，以防止下一个块执行。

此外，循环匹配元素的jQuery方法是.each()，而不是for循环（尽管仍然非常有效）。如下所示：

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

Answer 2

演示： http://jsfiddle.net/7hKTs/

请注意，您可以更简洁地执行此操作，但我希望保留原始结构，以便您可以看到我在上下文中所做的更正。

在switch声明中添加了中断。
在replace()之后添加了正确的html分配。 html()是一种方法;你需要用它的返回值做一些事情（比如把它分配给一个变量）。

示例1： thisLink.html().replace(/About/g,'');。这会获取链接的HTML，在其上调用replace()，但replace()的返回值未使用。这不会产生预期的效果。

示例2： thisLink.html(thisLink.html().replace(/About/g,''));现在，将修改后的HTML传递给html()方法。在这一行中，它通过使用和不使用参数调用html()来获取和来设置HTML。

示例3：但是，示例＃2在多次使用时非常冗长/重复，因此我们可以做一些更简单的事情：

// get the value
var html = thisLink.html();

// handle any number of cases here

// note the assignment of the return value of html()
html = html.replace(/About/g, '&#xe00f;');

// set the value
thisLink.html(html);

另请参阅：http://api.jquery.com/html/

完整示例

$(document).ready(function () {
    var navigationLinks = $('.nav a');
    for (var i = 0; i < navigationLinks.length; i++) {
        var thisLink = navigationLinks.eq(i);
        var html = thisLink.html();

        switch (html) {
            case "About":
                html = html.replace(/About/g, '&#xe00f;');
                break;
            case "Work":
                html = html.replace(/Work/g, '&#xe010');
                break;
            case "CV":
                html = html.replace(/CV/g, '&#xe00c');
                break;
            case "Resume":
                html = html.replace(/Resume/g, '&#xe00d;');
                break;
            case "down":
                html = html.replace(/down/g, '&#xe00d;');
                break;
            case "Mail":
                html = html.replace(/Mail/g, '&#xe011;');
                break;
            case "Dribbble":
                html = html.replace(/Dribbble/g, '&#xe015;');
                break;
            case "GooglePlus":
                html = html.replace(/GooglePlus/g, '&#xe012;');
                break;
            case "Facebook":
                html = html.replace(/Facebook/g, '&#xe013;');
                break;
            case "Twitter":
                html = html.replace(/Twitter/g, '&#xe014');
                break;
        }

        thisLink.html(html);
    }
});

替代

演示： http://jsfiddle.net/7hKTs/5/

我更喜欢这种方法，因为它几乎完全取出了标记。相反，我们使用data-*属性来存储备用HTML字符串。

<强> HTML

<nav class="nav">
    <ul>
        <li><a href="#" data-alt="&#xe00f;">About</a></li>
        <li><a href="#" data-alt="&#xe010;">Work</a></li>
        <li><a href="#" data-alt="&#xe00c;">CV</a></li>
        <!-- etc -->
    </ul>
</nav>

<强>的JavaScript

$(document).ready(function () {
    $('.nav a').each(function () {
        var obj = $(this);
        obj.html(obj.data("alt"));
    });
});

Answer 3

鉴于switch / case已使用完全匹配，全局RegExp和replace实际上正在重复工作：

switch(thisLink.html()){
    case "About":
        thisLink.html('&#xe00f;');
        break;

    case "Work":
        thisLink.html('&#xe010;');
        break;

    // etc.
}

Answer 4

我相信使用替换地图并使用.each()迭代每个锚点会容易得多：

$(document).ready(function() {
    var navigationLinks = $('.nav a'),
    replacements = {
        "About": '&#xe00f;',
        "Work": '&#xe010',
        "CV": '&#xe00c',
        "Resume": '&#xe00d;',
        "down": '&#xe00d;',
        "Mail": '&#xe011;',
        "Dribbble": '&#xe015;',
        "GooglePlus": '&#xe012;',
        "Facebook": '&#xe013;',
        "Twitter": '&#xe014'
    };

    navigationLinks.each(function() {
        var $this = $(this),
        txt = replacements[$this.text()];

        if (txt) {
            $this.text(txt);
        }
    });
});

Answer 5

我想我也会花2美分。与其他人提到的概念相同。此示例使用map和jquery的$ .each函数。

var hashMap = { 'About' : '&#xe00f;', 'Work' : '&#xe010;', 'CV' : '&#xe00c;' }

$.each($('.nav a'), function(index, value) { 
        var x = $(value).html(); 
        $(value).html(hashMap[x]); 
} );

尝试替换所有锚点中的内容，但内容未被替换

5 个答案:

替代