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

Question

我使用的是Fancybox，它使用图像的title=""属性来填充每个图像的标题。我现在的问题是，我想有一些文字的标题风格不同。每个图片的标题都是从一个数组中创建的:

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

不幸的是，

不起作用。钉子吗?

Answer 1

首先，我建议你在(HTML5) data-*属性内设置标题，所以当访问者悬停链接时，他们看不到你的<span>代码。

第二，你必须非常小心语法，特别是当你在其他引号内嵌套引号时，因为你可以比预期更早地关闭你的声明;例如这一行代码:

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

…<span>标记中style属性(style="")的开始双引号实际上关闭了<a>标记的title属性，这也使用双引号，因此您的代码在这里中断。还要注意，<span>标记没有正确设置，您正在做类似

的事情

<span style="font-weight: 800;"{forname} {surname}</span>

…因为你忘了把>放在style属性后面。

试试下面的代码:

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

注意我是如何使用和转义引号的。还请注意，我使用了data-title属性而不是title(我还设置了href属性，以防您错过它;)

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

$(".fancybox").fancybox({
    beforeShow: function () {
        this.title = this.element.data("title");
    } // , // <== comma if other options following
    // your other API options here
});

<<p>看到strong> JSFIDDLE