使用JQuery生成HTML，然后使用.html（）对其进行更改。 在FF中可以，但不能使用Chrome吗？

Question

我正在利用JQuery cycle插件。

该插件生成带有编号链接的图像滑块，以在图像之间交换。 我想将编号链接更改为自己的一些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）

Answer 1

第一次return后，您的多次returns将无法获得。 这导致JS错误。

实现所需目标的便捷方法是：

现场演示

$(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只是一个将与修剪后的HTML进行比较的对象。
如果没有找到匹配项，将仅返回已经存在的HTML。