将另一个div元素作为参数传递给jquery插件

Question

我基本上是想做一个下拉式jquery插件。

HTML

<script type='text/javascript' src='script.js'></script>
<div id="clickDiv">Click Me</div>
<div id="nav">
    <span>settings</br></span>
    <span>Preferences</br></span>
    <span>Logout</br></span>        
</div>

脚本（script.js）

$('#clickDiv').click(function() {
   $('#nav').dDown({
          parent : '#clickDiv'; 
   });  
});

插件脚本

$.fn.dDown = function(parent) { 
    var options = {
        parent : ''
    };

    if(parent) {
        $x = $(parent);
        console.log($x.css('top'));  //Get the top position of the #clickDiv
    }
};

如何获取元素的属性.. line $ x.css（'top'）抛出错误

Answer 1

parent变量是一个对象，就像选项一样。你必须使用：

$.fn.dDown = function(options) {  //<--- Renamed "parent" to "options"
    options = jQuery.extend({
        parent : ''
    }, options);                  //<--- Implementing default values

    var $x = $(options.parent);
    if ($x.length) { // <-- Check if the selectors matches anything
        console.log($x.css('top'));  //Get the top position of the #clickDiv
    }
};

代码运行良好，但您应该不将其定义为jQuery插件，因为它对this对象执行 nothing 。 Propery定义的jQuery插件通常是可链接的，并且可以作用于jQuery集合中的所有元素。