1

排版挑战

更新：

为了实现上面的排版，我将不得不使用一些 jquery / css 技巧。

首先，我必须创建一个类.underlined来设置背景图像，以完全控制下划线。不幸的是，仅仅设置一个边框底部，将无法完成这项工作，因为它将使用字体的 x 高度。

其次，我必须在字符串中找到特定字符，例如小写 g并删除.underlined该类或为该特定字符应用一个附加类。

现在我如何匹配字符串中的 g,j,p,q,y 并在其上应用一个类？

它应该与此类似，但是然后使用 reg exp 什么的？

http://jsfiddle.net/hMEHB/2/

我尝试了:contains选择器，但在拆分字符串并将其重新组合在一起时遇到了麻烦。

4

1 回答 1

2

使用你的小提琴中的标记，我相信你想要这样的东西：

var descenders = {"g": true, "j": true, "p": true, "q": true, "y": true};
$('a').each(function (i, elem) {
    var self = $(elem),
        textNodes = self.text().split(''),
        i = 0;
    for (i = 0; i < textNodes.length; i += 1) {
        if (descenders[textNodes[i]]) {
            textNodes[i] = '<span class="descender">' + textNodes[i] + '</span>';
        } else {
            textNodes[i] = '<span class="underline">' + textNodes[i] + '</span>';
        }
    }
    self.html(textNodes.join(''));
});

更新小提琴：http: //jsfiddle.net/hMEHB/15/

于 2013-06-09T16:04:31.310 回答