JavaScript 生成的文本消失（Cufon & Clone）答案

【问题标题】：JavaScript generated text disappears (Cufon & Clone)JavaScript 生成的文本消失（Cufon & Clone）
【发布时间】：2011-08-25 03:49:51
【问题描述】：

我有一个清单：

<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>

标题文本显示为 Cufon 生成的画布。

我正在克隆我的列表并使用第二个作为流沙脚本的替代品。

一切正常，但排序后标题不可见（但画布仍然存在！）。

如何解决？

活生生的例子：

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

（点击链接后每个“Cufon Title”都会消失，删除 Cufon.now() 会有所帮助，但这不是答案，因为这部分代码在我的项目中是必需的）

【问题讨论】：

标签： jquery clone cufon quicksand

【解决方案1】：

这是因为 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

是的 - 发现了一些非常有趣的东西：流沙有一个选项可以用于这样的目的。试试这个（注意 - 为了便于测试，我已将你的四个函数压缩为 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 调用添加到您的原始函数中，那么调用它是很重要的。

手指交叉！

【讨论】：

这似乎合乎逻辑，你能不能告诉我在我的情况下究竟如何触发 Cufon.refresh()？
添加了一些代码来回答应该这样做 - 这个例子匹配视频数据值
您的解决方案几乎是完美的，cufon 标题确实出现了，但它们在其他内容（在我的示例中为文本和图像）之后淡入，有什么想法可以避免这种情况吗？ :)
说实话，我不确定你能不能。延迟很可能是由流沙排序的持续时间引起的 - 我怀疑您是否可以在排序转换处于活动状态时显示 Cufon 文本。不过我会仔细考虑的:)

【解决方案2】：

验证您的 HTML。在很多地方都存在未知的data-id 和data-value 属性的问题，例如：<li data-id="1" data-value="Image">

【讨论】：