使用JQuery生成HTML，然後使用.html（）來修改它。確定在FF但不是Chrome？

我正在使用JQuery循環插件。使用JQuery生成HTML，然後使用.html（）來修改它。確定在FF但不是Chrome？

該插件生成一個圖像滑塊，帶有編號鏈接以在圖像之間進行交換。我想改變編號鏈接到我的自己的一些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; 

});

這火狐狸工作正常，但不是瀏覽器。我相信這是因爲編號鏈接不是原始DOM的一部分，所以Chrome難以找回並修改它。

有誰知道如何正確地做到這一點？

編輯：

我在Chrome中看到的是：

我在火狐（我想達到的目標），看到的是：

的Lorem豆撈坐阿梅德存有

來源

2013-03-26 MeltingDog

'＃nav'的內容是什麼？裏面有多個'a'嗎？你想要替換內容嗎？ FireFox輸出Chrome不是什麼？ – couzzi 2013-03-26 00:53:54

您的代碼將始終執行第一個return語句。你檢查了你的邏輯嗎？ – ShankarSangoli 2013-03-26 00:53:57

這與您的問題無關，但您的功能永遠無法到達第2,3或4行 – olsn 2013-03-26 00:54:12

您的多個returns在第一個return之後無法訪問。這是導致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; 

    }); 

});

definedText只是一個對象，將用於修剪HTML比較。
如果找不到匹配項，只會返回已存在的HTML。

來源

2013-03-26 01:26:47

使用JQuery生成HTML，然後使用.html（）來修改它。確定在FF但不是Chrome？

回答

相關問題