Question

我正在使用Fancybox，它使用图片的title=""属性来填充每张图片的标题。我现在遇到的问题是，我希望标题中的一些单词风格不同。每个img的标题都是从一个数组创建的：

var img = '<a class="fancybox" title="'+ imgArr[i].forname + ' ' + imgArr[i].surname +'" rel="group1"></a>'

我尝试做的是给imgArr[i].forname一个更大胆的字体，所以我的尝试是：

var img = '<a class="fancybox" title="<span style="font-weight: 800;"'+ imgArr[i].forname + '</span> ' + imgArr[i].surname +'" rel="group1"></a>'

不幸的是它不起作用。什么clou？

Answer 1

首先，我建议您在（HTML5）data-*属性中设置字幕，因此当访问者悬停链接时，他们看不到您的代码。

其次，你必须非常小心语法，主要是当你在其他引号中嵌入引号时，因为你可以比预期更早地关闭你的声明;例如，这行代码：

var img = '<a class="fancybox" title="<span style="font-weight: 800;"'+ imgArr[i].forname + '</span> ' + imgArr[i].surname +'" rel="group1"></a>'

... style标记中style=""属性（）的开头双引号实际上正在关闭title的{{1}}属性标签，也使用双引号，所以你的代码在这里打破。另请注意，<a>标记未正确设置，您正在执行类似

的操作

<span>

...因为您忘记在属性之后放置>。

所以试试这段代码：

style

注意我如何使用和转义引号。另请注意，我使用了var img = '<a class="fancybox" data-title="' + imgArr[i].forname + ' ' + imgArr[i].surname + '" rel="group1" href="{target}"></a>'属性而不是data-title（我还设置了title属性，以防您错过它;）

然后，在您的fancybox自定义脚本中的href回调中获取data-title值，如：

beforeShow

参见 JSFIDDLE

给img title一个样式供以后在fancybox中使用

1 个答案: