在jQuery插件的選項部分中訪問調用者元素的屬性

我有一些鏈接，根據他們在點擊時顯示的內容，他們有不同的寬度和高度數據（這些鏈接在服務器端生成），如：在jQuery插件的選項部分中訪問調用者元素的屬性

<a class="inline" href="#inline-content-1" data-width="80%" data-height="80%">content 1</a> 
<a class="inline" href="#inline-content-2" data-width="50%" data-height="80%">content 2</a>

現在我想使用類似：

$('.inline').colorbox({inline:true, width:$(this).data('width'), height:$(this).data('height')});

但$(this).data('width')似乎沒有有效的選項部分

來源

2016-07-06 Ashkan Mobayen Khiabani

只需使用'數據CBOX-'你的屬性前綴，看我的答案。 – gevorg

彩盒可以傳遞到位任何性質的靜態值進行判定的功能。

$('.inline').colorbox({ 
    inline: true, 
    width: function(){ return $(this).data('width'); }, 
    height: function(){ return $(this).data('height'); } 
});

來源

2016-07-06 12:19:46 RomanPerekhrest

非常好，我有沒有辦法在任何插件的選項中訪問屬性？ –

@AshkanMobayenKhiabani，它可能取決於某個插件的實現。這個主題可能有所幫助：https://forum.jquery.com/topic/how-to-access-this-inside-my-custom-jquery-widget-callback，https://learn.jquery.com/plugins/advanced -plugin的概念/ – RomanPerekhrest

您CA ñ做這樣的事情：

$('.inline').each(function(){ 
    $(this).colorbox({inline:true, width:$(this).data('width'), height:$(this).data('height')}); 
});

來源

2016-07-06 12:06:51 Titus

謝謝Titus（+1）。這將解決我目前的問題，但我很想知道我是否可以從選項訪問來電者。 –

最好的解決辦法使用data-cbox-前綴數據屬性：

<a class="inline" href="#inline-content-1" data-cbox-width="80%" data-cbox-height="80%">content 1</a> 
<a class="inline" href="#inline-content-2" data-cbox-width="50%" data-cbox-height="80%">content 2</a>

與data-cbox-啓動的所有屬性將被自動的加入到選項。

演示

$('.inline').colorbox({inline: true});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.colorbox/1.6.4/jquery.colorbox-min.js"></script> 
 

 
<a class="inline" href="#inline-content-1" data-cbox-width="80%" data-cbox-height="80%">content 1</a> 
 
<a class="inline" href="#inline-content-2" data-cbox-width="50%" data-cbox-height="80%">content 2</a>

來源

2016-07-06 12:21:49 gevorg

在jQuery插件的選項部分中訪問調用者元素的屬性

回答

相關問題