Question

我有一个清单：

<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生成的画布。

我正在克隆我的列表并使用第二个列表替换Quicksand脚本。

一切都像预期的那样工作，但是在排序之后标题是不可见的（但画布仍在那里！）。

如何解决这个问题？

实例：

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

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

Answer 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

对 - 发现一些非常有趣的事情：Quicksand有一个选择就是为了这个目的。试试这个（注意 - 我已经将你的四个函数压缩为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调用添加到原始函数中，则{{1}}调用非常重要。

手指交叉！

Answer 2

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

JavaScript生成的文本消失（Cufon＆amp; Clone）

2 个答案: