文章/答案/技术大牛

发布

社区首页 >问答首页 >尝试替换所有锚点中的内容，但内容未被替换

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

Stack Overflow用户

提问于 2013-04-12 10:09:53

回答 5查看 140关注 0票数 2

我正在尝试将所有内容替换为所有锚中的对应unicode字符，这些锚是nav ( .nav a )类的后代。

但是这个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类中锚点内的文本仍然是原始文本，而不是独码：https://dl.dropboxusercontent.com/u/270523/help/replace/index.html

javascript

jquery

回答 5

Stack Overflow用户

发布于 2013-04-12 10:17:25

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;');
});

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

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

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

票数 2

Stack Overflow用户

发布于 2013-04-12 10:18:09

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

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

在switch replace()之后的html正确分配中添加了分隔符。html()是一种方法；您需要对其返回值执行某些操作(例如将返回值赋给变量)。

示例1: thisLink.html().replace(/About/g,'');。这将获取链接的超文本标记语言，并对其调用replace()，但replace()的返回值未使用。这将不会有预期的效果。

示例2: thisLink.html(thisLink.html().replace(/About/g,''));现在将修改后的传递给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"));
    });
});

票数 2

Stack Overflow用户

发布于 2013-04-12 10:26:21

鉴于switch/case已经可以处理精确匹配，全局RegExp和replace实际上是在重复工作：

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

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

    // etc.
}

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/15961963

复制

相似问题

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

回答 5

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 5

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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