在jQuery中將rel屬性更改爲data-rel與HTML5一起使用

我試圖爲HTML5網站實現爲XHTML 1.0 doctype編寫的JQuery圖像庫，問題是我無法在HTML5中使用自定義「rel」屬性：在jQuery中將rel屬性更改爲data-rel與HTML5一起使用

<!-- 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自定義「的數據相對」 atrributes而不是「相對」，但什麼是錯我的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>

來源

2012-10-14 GTS Joe

使用'id'會出現什麼問題？你真的需要解釋你的確切問題。 – Sparky

注意到它錯了。

它工作得很好。

測試在這裏：http://jsfiddle.net/RASG/NCrmb/

，如果您有問題（你沒有說發生了什麼或什麼是應該有這樣的事情），也可能是別的somewere。

來源

2012-10-14 00:33:47 RASG

嗨，問題是它不驗證與HTML5。該代碼最初是爲允許自定義rel屬性值的XHTML 1.0 doctype編寫的，但HTML5不支持。因此，我試圖解決這個問題，而不是使用data-rel，但現在JQuery不起作用。我知道有一種方法可以修改代碼以使其與data-rel一起工作，但我是一個JQuery n00b。 –

我最近面臨同樣的問題，我完全得到你所要實現的目標，但首先我會改正，你使用「相對」屬性的初始代碼」

請，請注意‘相對’屬性是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因爲對於「相對」值不會驗證

如果你想使用「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」中的值。

上面的代碼將兩個使用「的數據相對」您的畫廊的工作：

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

我希望我沒有把你與解釋混淆。

來源

2013-03-12 10:37:57 EOZyo

這工作得很好，謝謝你的Colorbox data-rel解決方案 – tribulant

在jQuery中將rel屬性更改爲data-rel與HTML5一起使用

回答

相關問題