生成的JavaScript文本消失（的Cufón＆克隆）

我有一個列表：作爲生成的Cufón畫布正在顯示生成的JavaScript文本消失（的Cufón＆克隆）

<ul> 
    <li><h2>Header</h2><p>Text</p></li> 
    <li><h2>Header</h2><p>Text</p></li> 
    <li><h2>Header</h2><p>Text</p></li> 
</ul>

標題文本。

我克隆我的列表並使用第二個替代Quicksand腳本。

一切都像預期的那樣工作，但排序後標題不可見（但畫布仍然存在！）。

如何解決這個問題？

活生生的例子：

http://bartekka.ayz.pl/quicksand/

（每一個「的Cufón標題」消失點擊一個鏈接，刪除後Cufon.now（）幫助，但這不是因爲這部分代碼在需要的答案我的項目）

來源

2011-05-13 Wordpressor

這是因爲Cufon創建元素的方式 - 總是給我造成麻煩。我所做的是在任何與JavaScript交互之後重繪文本。最快的方法是撥打Cufon.refresh()，這將重新繪製頁面上的所有cufon項目。或者，您可以專門針對它們。

當我這樣做時，我傾向於創建一個函數來完成我將改變的cufon項目的初始繪圖。然後，我可以在我的排序（或任何）js完成後回想一下這個函數。

HTH :)

編輯迴應評論

當然，沒有後顧之憂:) 的排序是使用插件具有回調功能，因此你可以這樣做：

jQuery('.portfolio-sorted').quicksand(cache_list.find('li[data-value=Video]'), { 
     duration: 500, 
    }, 
    function(){ 
     Cufon.refresh(); 
     // OR Cufon.replace('h2', { fontFamily: 'Quicksand' }); 
     // OR Cufon.replace($('.portfolio-sorted li h2'), { fontFamily: 'Quicksand' }); 
    });

編輯2

ř ight - 發現了一件非常有趣的事情：流沙有一個選擇就是爲了這個目的。試試這個（？說明 - 我已經壓縮的四大功能合爲1便於測試 - 可能這是你可以使用）：

var cache_list = jQuery(this).clone().append('content'); 
//Add on click event handler to everything at once 
    jQuery('ul.portfolio-terms li a').click(function(e) { 
    //Call quicksand on the original works_list list(the one visible to the user) 
    //pass to it all the 'li' elements from the cached clone 
    //since we want to display them all 

    //get the target element based on data value 
    var target = 'li[data-value='+$(this).attr('data-value')+']'; 

    if ($(this).attr('data-value') == "All") { 
    target = 'li'; 
    } 

    jQuery('.portfolio-sorted').quicksand(cache_list.find(target), { 
      duration: 500, 
      enhancement: function() { 
       Cufon.refresh(); 
       // OR Cufon.replace('h2', { fontFamily: 'Quicksand' }); 
       // OR Cufon.replace($('.portfolio-sorted li h2'), { fontFamily: 'Quicksand' }); 
       } 
    }); 
    e.preventDefault(); 
});

認爲，這將做到這一點（在Chrome和FF對我的作品）。如果您想將其添加到您的原始功能中，enhancement呼叫是重要的。

手指劃過！

來源

2011-05-27 12:38:36 lnrbob

這似乎是合乎邏輯的，你會這麼好，告訴我在我的情況下究竟是如何觸發Cufon.refresh（）？ – Wordpressor 2011-05-27 18:27:44

添加了一些代碼來回答應該這樣做 - 這個例子匹配視頻數據值 – lnrbob 2011-05-27 19:27:01

你的解決方案几乎是完美的，cufon頭真的顯示，但他們淡入後其他內容（我的例子中的文本和圖像），任何想法如何避免這種情況？ :) – Wordpressor 2011-05-27 21:53:52

驗證您的HTML。在不少地方存在未知data-id和data-value屬性的問題，例如：<li data-id="1" data-value="Image">

來源

2011-05-27 12:29:26 Blazes

生成的JavaScript文本消失（的Cufón＆克隆）

回答

相關問題