我正在尝试为我的 HTML5 站点实现一个为 XHTML 1.0 文档类型编写的 JQuery 图片库，问题是我不能在 HTML5 中使用自定义“rel”属性:
<!-- In <head> tag -->
<script type="text/javascript">
$(document).ready(function(){
$("a[rel='first_gallery']").colorbox({opacity: ".75"});
$("a[rel='second_gallery']").colorbox({opacity: ".75"});
});
</script>
<!-- In <body> tag -->
<a href="first_gallery/1.jpg" title="Image 1" rel="first_gallery"><img src="images/1_thumbnail.jpg" alt="Image 1 Thumbnail"/></a>
<a href="second_gallery/2.jpg" title="Image 2" rel="second_gallery"><img src="images/2_thumbnail.jpg" alt="Image 2 Thumbnail"/></a>
我已经尝试使用 HTML5 自定义“data-rel”属性而不是“rel”，但我的 JQuery 有什么问题？
<!-- In <head> tag -->
<script type="text/javascript">
$(document).ready(function(){
$("a[data-rel='first_gallery']").colorbox({opacity: ".75"});
$("a[data-rel='second_gallery']").colorbox({opacity: ".75"});
});
</script>
<!-- In <body> tag -->
<a href="first_gallery/1.jpg" title="Image 1" data-rel="first_gallery"><img src="images/1_thumbnail.jpg" alt="Image 1 Thumbnail"/></a>
<a href="second_gallery/2.jpg" title="Image 2" data-rel="second_gallery"><img src="images/2_thumbnail.jpg" alt="Image 2 Thumbnail"/></a>
最佳答案
我最近遇到了同样的问题，我完全明白你想要实现的目标，但首先我会修复你使用“rel”属性的初始代码”
请注意，“rel”属性是 jquery.colorbox 对象中的一个选项:
<!-- In <head> tag -->
<script type="text/javascript">
$(document).ready(function(){
$("a").colorbox({ rel: "first_gallery", opacity: ".75"}); // this means <a rel="first_gallery" …>
$("a").colorbox({ rel: "second_gallery", opacity: ".75"}); // this means <a rel="second_gallery" …>
});
</script>
<!-- In <body> tag -->
<a rel="first_gallery" href="first_gallery/1.jpg" title="Image 1"><img src="images/1_thumbnail.jpg" alt="Image 1 Thumbnail"/></a>
<a rel="second_gallery" href="second_gallery/2.jpg" title="Image 2"><img src="images/2_thumbnail.jpg" alt="Image 2 Thumbnail"/></a>
如您所知，上面的示例不会验证为 HTML5，因为“rel”的值不会验证。
如果你想使用“data-rel”你的代码应该是这样的:
<!-- In <head> tag -->
<script type="text/javascript">
$(document).ready(function(){
$("a").colorbox({ rel: $(this).data('rel'), opacity: ".75"});
});
</script>
rel: $(this).data('rel') 告诉 jquery.colorbox 使用“data-rel”来包装画廊。它有一些限制:您不能使用自定义“data-”属性，也不能使用“data-rel”中的值。
上面的代码将适用于使用“data-rel”的两个画廊:
<!-- In <body> tag -->
<a data-rel="first_gallery" href="first_gallery/1.jpg" title="Image 1"><img src="images/1_thumbnail.jpg" alt="Image 1 Thumbnail"/></a>
<a data-rel="second_gallery" href="second_gallery/2.jpg" title="Image 2"><img src="images/2_thumbnail.jpg" alt="Image 2 Thumbnail"/></a>
如果您想为不同的画廊设置不同的选项，比如不同的不透明度，缺点就来了，一个实际的例子是:
<!-- In <head> tag -->
<script type="text/javascript">
$(document).ready(function(){
$("a.gallery1").colorbox({ rel: $(this).data('rel'), opacity: ".75"});
$("a.gallery2").colorbox({ rel: $(this).data('rel'), opacity: ".80"});
});
</script>
<!-- In <body> tag -->
<a class="gallery1" data-rel="first_gallery" href="first_gallery/1.jpg" title="Image 1"><img src="images/1_thumbnail.jpg" alt="Image 1 Thumbnail"/></a>
<a class="gallery2" data-rel="second_gallery" href="second_gallery/2.jpg" title="Image 2"><img src="images/2_thumbnail.jpg" alt="Image 2 Thumbnail"/></a>
我希望我的解释没有让您感到困惑。
关于javascript - 在 JQuery 中将 rel 属性更改为 data-rel 以使用 HTML5，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12878207/