Javascript 有没有办法在'；alt'；使用fancybox的属性？

我试图看看是否可以通过html或使用某种javascript在图像的“alt”标记中添加html代码。我正在使用fancybox作为我的图像库。我正在尝试使用fancybox作为一种表单来显示图像和图像描述，添加带有样式的信息（如项目符号和分隔符），并添加一个按钮，将您带到不同的页面。目前我有一个按钮在工作，但是这个按钮在javascript中，所以每个fancybox图像都有这个按钮和相同的url。我希望每个图片上的每个按钮都有不同的链接

下面是我拥有的javascript，它当前在fancybox中的图像下显示alt文本

$(".fancybox").fancybox({               
                padding : 0,
                beforeShow: function () {
                    this.title = $(this.element).attr('title');
                    this.title = '<h4>' + this.title + '</h4>' + '<div style="width:100%; height: 150px; overflow: auto;">' + $(this.element).parent().find('img').attr('alt') + '<a class="button button-small" href="http://www.google.com"> Sign Up </a>' + '</div>';
                },
                helpers : {
                    title : { type: 'inside' },
                }
            });

$（“.fancybox”）.fancybox（{
填充：0，
beforeShow:函数（）{
this.title=$（this.element）.attr（'title'）；
this.title=''+this.title++'+$（this.element）.parent（）.find（'img'）.attr（'alt'）++'+''；
},
助手：{
标题：{type:'inside'}，
}
});

该fancybox的index.html中的html为：

<li class="item-thumbs span3 design">
                                <!-- Fancybox - Gallery Enabled - Title - Full Image -->
                                <a class="hover-wrap fancybox" data-fancybox-group="gallery" title="The City" href="_include/img/work/full/image-01-full.jpg">
                                    <span class="overlay-img"></span>
                                    <span class="overlay-img-thumb font-icon-plus"></span>
                                </a>
                                <!-- Thumb Image and Description -->
                                <img src="_include/img/work/thumbs/image-01.jpg" alt="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis elementum odio. Curabitur pellentesque, dolor vel pharetra mollis.">
                            </li>

根据定义，

alt

属性（非标记）是纯文本，因此浏览器会将插入的内容视为纯文本（非标记）。如果在代码中将类似HTML标记的字符串插入到

alt

属性值中，然后将其作为标记进行解析和处理，这与其他属性的类似操作没有什么不同

---

alt

属性有一个定义良好的作业，当图像未显示但显示为语音、使用盲文设备呈现或显示为文本时，该属性充当图像的文本替换。因此，试图将其用于其他目的是徒劳的

类似的注意事项也适用于

标题

属性

---

因此，要使用将被解析为HTML的数据，最好使用自定义属性，特别是像

datadesc

或任何您喜欢的属性。它们在浏览器或搜索引擎中没有默认处理，因此可以安全地用于私人用途。

根据定义，

alt

属性（非标记）是纯文本，因此浏览器会将插入的任何内容视为纯文本（非标记）。如果在代码中将类似HTML标记的字符串插入到

alt

属性值中，然后将其作为标记进行解析和处理，这与其他属性的类似操作没有什么不同

---

alt

属性有一个定义良好的作业，当图像未显示但显示为语音、使用盲文设备呈现或显示为文本时，该属性充当图像的文本替换。因此，试图将其用于其他目的是徒劳的

类似的注意事项也适用于

标题

属性

---

因此，要使用将被解析为HTML的数据，最好使用自定义属性，特别是像

datadesc

或任何您喜欢的属性。它们在浏览器或搜索引擎中没有默认处理，因此可以安全地用于私人用途。

如果您想要更复杂的fancybox

title

（带有html、超链接等），那么如果您想要更复杂的fancybox

title

（带有html、超链接等），请尝试使用本文中分离（隐藏）的html元素，然后尝试使用一个单独的（隐藏的）html元素，如本文@marcopolo：如果你想使用（html5）

data-*

attributes，这里有一些示例，但它们可能不适合包含html标记，因此请参阅我对您的问题的评论，以获得更好的选择。@Jukka：因此，我对使用data-*属性做了一些研究，并在我的网站上进行了尝试，结果成功了！现在，我可以在新的“数据描述”属性中添加任何带有的html属性，它可以完美地替换它。在Javascript文件中，我替换了：…$（this.element）.parent（）.find（'img'）.attr（'alt'）+。。。使用$（this.element）.parent（）.find（'img'）.attr（'data-description'）+@JFK：感谢您提供这些示例。我会保存它们以备将来参考。感谢you@marcopolo：代替此

$（this.element）.parent（）.find（'img'）.attr（'data-description'）

您可以执行此

$（this.element）.parent（）.find（'img'）.data（'description'）

。但它可能比额外的html元素更容易失败（数据标题属性中的某些元素可能需要转义）@marcopolo:如果你想使用（html5）

data-*

attributes，这里有一些示例，但它们可能不适合包含html标记，因此请参阅我对您的问题的评论，以获得更好的选择。@Jukka：因此，我对使用data-*属性做了一些研究，并在我的网站上进行了尝试，效果很好！现在我可以在新的“数据描述”中添加任何带有的html属性属性并将其完全替换。在Javascript文件中，我将：…$（this.element）.parent（）.find（'img'）.attr（'alt'）+…替换为$（this.element.）.parent（）.find（'img'）.attr（'data-description'）+@JFK:感谢您提供了这些示例。我将保存它们以备将来参考。谢谢you@marcopolo：而不是此

$（this.element）.parent（）.find（'img'）.attr（'data-description'）

您可以执行此操作。

$（this.element）.parent（）.find（'img'）.data（'description'）

。但是，它可能比额外的html元素更容易失败（可能需要转义

数据标题

属性中的某些元素）