2

我正在尝试用作为类 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 类中的锚点内的文本仍然是原始文本，而不是 unicode：https ://dl.dropboxusercontent.com/u/270523/help/replace/index.html

4

5 回答 5

2

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 方法是 with .each()，而不是 for 循环（尽管仍然非常有效）。所以像：

$('.nav a').each(function () {
    var thisLink = $(this);
    var myHtml = thisLink.html();
    // The rest of the code...
});
于 2013-04-12T02:17:24.700 回答
2

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

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

  • 在switch语句中添加了中断。
  • 在replace(). html()是一种方法；您需要对其返回值做一些事情（例如将其分配给变量）。

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

示例 2： thisLink.html(thisLink.html().replace(/About/g,'&#xe00f;'));现在将修改后的 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"));
    });
});
于 2013-04-12T02:18:08.513 回答
1

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

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

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

    // etc.
}
于 2013-04-12T02:26:20.870 回答
1

我相信使用替换地图并使用以下方法迭代每个锚点会容易得多.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);
        }
    });
});
于 2013-04-12T03:00:33.490 回答
0

我想我也会考虑我的 2 美分。与其他提到的概念相同。这个例子使用了一个地图和 jquery 的 $.each 函数。

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

$.each($('.nav a'), function(index, value) { 
        var x = $(value).html(); 
        $(value).html(hashMap[x]); 
} );
于 2013-04-12T03:31:54.987 回答