jQuery   发布时间:2022-03-30  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了Jquery插件:如何访问选项?大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
目前我正在编写一个带有一些选项的jQuery插件.

来自网页的简化代码例:

<div id="div1"></div>
<div id="div2"></div>

$(document).ready(function(){
    $("#div1").MyFunc({width: 100,height: 100});
    $("#div2").MyFunc({width: 200,height: 200});
});

这是一个(再次简化)的插件代码

(function($) {
 $.fn.MyFunc = function(options) {
  // extending default setTings
  var options = $.extend( {
   width: 300,height: 200
  },options);

     return this.each(function() {
      // doing something for example with #div1
         $(this).click(function() {
          // here I need to access ANOTHER (e.g. #div2) object's options
          // how can I do it?
         });
     });
 }
})(jQuery);

那么问题是在列表中 – 如何从插件函数内部访问另一个对象的选项?像$(“#div2”).options.width

解决方法

您可以使用jQuery的.data(key,val)方法在您的插件访问它们之前设置这些选项来实现此目的:
// set 'options' for '#div2'
  $("#div2").data('options',{width: 500,height: 500});

  // get 'options' for '#div2' (this would be in your plugin codE)
  var opts = $('#div2').data('options');
  alert('options.height:' + opts.height + '\n'
        'options.width:' + opts.width);

当您将数据存储到类似字典的对象时,您可以设置几乎所需的任何数据:

$("#div2").data('priority',2);
  $("#div2").data('flagColors',['red','white','blue']);
  $("#div2").data('parts',{arm: 2,legs: 2});

…并在以后检索:

var foo = $("#div2").data('priority');
  var foo2 = $("#div2").data('flagColors');
  var foo3 = $("#div2").data('parts');

在幕后,jQuery为您的jQuery选择(内部生成的UUID值)的DOM元素添加一个expando属性,其值是jQuery.cache中的唯一键,它基本上位于所有数据的存储位置从/检索.

要清理,请调用.removeData(key)(如果没有键被传递,所有的数据被删除).

大佬总结

以上是大佬教程为你收集整理的Jquery插件:如何访问选项?全部内容,希望文章能够帮你解决Jquery插件:如何访问选项?所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。