Javascript 在JQuery中将rel属性更改为data rel以使用HTML5_Javascript_Jquery_Html_Attributes_Rel

Javascript 在JQuery中将rel属性更改为data rel以使用HTML5

javascript jquery html

Javascript 在JQuery中将rel属性更改为data rel以使用HTML5,javascript,jquery,html,attributes,rel,Javascript,Jquery,Html,Attributes,Rel,我试图在我的HTML5站点上实现为XHTML 1.0 doctype编写的JQuery图像库，问题是我无法在HTML5中使用自定义的“rel”属性：  <script type="text/javascript"> $(document).ready(function(){ $("a[rel='first_gallery']").colorbox({opacity: ".75"}); $("a[rel

我试图在我的HTML5站点上实现为XHTML 1.0 doctype编写的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>


$（文档）.ready（函数（）{
$（[rel='first_gallery']）；
$（[rel='second'u gallery']）；
});

我已经尝试过使用HTML5自定义的“datarel”属性而不是“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>


$（文档）.ready（函数（）{
$（[data rel='first_gallery']）；
$（“a[data rel='second_gallery']）。颜色框（{opacity:.75}）；
});

注意它的错误

它很好用

在这里测试它：

如果您遇到问题（您没有说正在发生什么或应该发生什么），可能是其他人。

我最近遇到了同样的问题，我完全理解您试图实现的目标，但首先我将修复使用“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>

缺点是如果您想为不同的库设置不同的选项，比如说不同的不透明度，一个实际的例子是：

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


$（文档）.ready（函数（）{
$（“a.gallery1”）.colorbox（{rel:$（this）.data（'rel'），不透明度：“.75”}）；
$（“a.gallery2”）.colorbox（{rel:$（this）.data（'rel'），不透明度：“.80”}）；
});

我希望我没有把解释弄糊涂。

Hi，问题是它不能用HTML5验证。代码最初是为XHTML 1.0 doctype编写的，它允许自定义rel属性值，但HTML5不允许。因此我试图用数据rel来解决这个问题，但现在JQuery不起作用。我知道有一种方法可以解决这个问题修改代码以使其与data rel一起工作，但我是JQuery n00b。使用

id

会有什么问题？您确实需要解释您遇到的确切问题。这非常有效，感谢您提供Colorbox 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>