javascript - 使用 JQuery 生成 HTML，然后使用 .html() 对其进行更改。在 FF 中可以，但在 Chrome 中不行？

Question

我正在使用 JQuery 循环插件。

该插件生成一个图像 slider ，其中带有编号链接以在图像之间交换。我想将编号链接更改为我自己的一些 HTML(例如:将“1”更改为“我的字符串”)，因此我创建了:

$('#nav a').html(function(i, html) {
    return $.trim(html) == '1' ? '<h2>Lorem</h2>' : html;
    return $.trim(html) == '2' ? '<h2>Dolar Sit</h2>' : html;
    return $.trim(html) == '3' ? '<h2>Amet</h2>' : html;
    return $.trim(html) == '4' ? '<h2>Ipsum</h2>' : html;

});

这在 Fire Fox 中工作正常，但在 Chrome 中不行。我相信这是因为编号链接不是原始 DOM 的一部分，因此 Chrome 很难返回找到并更改它。

有人知道如何正确执行此操作吗？

编辑:

我在 Chrome 中看到的是:

1 2 3 4 5

我在 Fire Fox 中看到的(以及我想要实现的)是:

Lorem Dolar Sit Amet Ipsum

Answer 1

在第一个返回之后，您的多个返回将无法访问。这会导致 JS 错误。

实现所需目标的便捷方法可能是:

LIVE DEMO

$(function(){ // DOM READY

    var definedText = {
        1 : "<h2>Lorem</h2>",
        2 : "<h2>Dolar Sit</h2>",
        3 : "<h2>Amet</h2>",
        4 : "<h2>Ipsum</h2>"
    };

    $('#nav a').html(function(i, html) {

      var trHTML = $.trim(html);
      return definedText[trHTML] || html;

    });

});

defineText 只是一个将与 trim 后的 HTML 进行比较的对象。
如果没有找到匹配项，将简单地返回已经存在的 HTML。