将ligature.js应用于特定元素

时间:2013-01-23 22:04:31

标签: javascript jquery

我正在使用此ligature.js脚本向我的网站添加连字:http://code.google.com/p/ligature-js/

我遇到的问题是我只想将它应用于某些类名,因为如果它应用于某些系统字体,而不是我加载的网络字体,则连字符不会出现在Windows中。

文档说使用以下方法在特定元素上实现它:

ligature(false, document.getElementById('myMemoirs'));

如何使用它将它应用于不同的类,例如.site-title,或者使用jquery来执行此操作?提前谢谢。

2 个答案:

答案 0 :(得分:1)

如果你看一下连字源代码,你会发现它只支持传递一个元素作为第二个参数,但是它确实支持遍历所有传递的元素子元素来应用连字。 您可以通过在一个循环中遍历它们来将连字应用于多个元素,该循环一次调用一个元素。

var siteTitle = document.getElementsByClassName('site-title');
var elemLength = siteTitle.length;
while(elemLength--) {
  ligature(false, siteTitle[elemLength]);
}

或者使用jQuery

$.each($('.site-title'), function(index, element) {
  ligature(false, element);
});

但可能最好的方法是重构函数来处理多个元素。

答案 1 :(得分:1)

我们在Drupal基础主题中使用这个jQuery解决方案(效果很好BTW)并将其设置为目标多个选择器,如下所示。是否有一种简单的方法可以在某些子主题中使用覆盖脚本关闭某些选择器上的连字替换?我们的子主题继承了我们的基本主题脚本,但我们并不总是希望对所有先前定义的元素进行连字替换。

$.each($('h1, h2.site-name, .node-page h2, .node-page h3, .node-page h4'), function(index, element) {
    ligature(false, element);
});