如果元素由$(.data)引用，而不是由$('#id_of_element')引用，则检索this()可用

Question

我正在编写一个jQuery插件，需要将.data()添加到插件内部的元素中，并在稍后检索它。当我在一个元素上运行这个方法时，当我通过它的id引用元素时，我不能检索存储的数据，比如：

$('#name_of_the_element')

如果我使用$(this)引用元素，就可以访问数据。

我做错了什么？

下面是jQuery插件的代码和我在其中使用它的html文件的代码：

jQuery插件：

(function( $ ){

    var methods = {

        checkit : function(options) {

            return this.each(function(){

                var $this = $(this);

                $this.data('testdata','this is what i need to see');

            }); 
        }


    }

  $.fn.demoplug = function( method ) {        
    if ( methods[method] ) {
      return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 ));
    } else if ( typeof method === 'object' || ! method ) {
      return methods.checkit.apply( this, arguments );
    } else {
      $.error( 'Method ' +  method + ' does not exist on jQuery.antigravity' );
    }    

  };

})( jQuery );

HTML文件：

<div role="main" id="main">
    <ul id="miniatures">
        <li><img src="img/thumbs/thumb-01.jpg"></li>
        <li><img src="img/thumbs/thumb-02.jpg"></li>            
        <li id="mov3"><img src="img/thumbs/thumb-03.jpg"></li>
        <li><img src="img/thumbs/thumb-04.jpg"></li>            
        <li><img src="img/thumbs/thumb-05.jpg"></li>
    </ul>
</div>

<script src="js/libs/jquery-1.7.2.min.js"></script>
<script src="js/libs/jquery.demoplug.js"></script>
<script>

    $(document).ready(function(){

        $('li#mov3').demoplug('checkit');

        alert( $('li#mov3').data('checkit') );  // not working

        $('li#mov3').click(function(){

            alert( $(this).data('testdata') );  // works

        });
    });

</script>

Answer 1

    alert( $('li#mov3').data('checkit') );  // not working

这是因为您正在获取数据中的“checkit”键，但您将该键设置为“testdata”：

    $this.data('testdata','this is what i need to see');

将其更改为以下内容将会起作用：

    alert( $('li#mov3').data('testdata') );

Answer 2

啊，错误出现在错误的位置！我从我正在工作的插件中提取了这段代码，以显示我认为错误的地方，但真正的错误是在插件内部我使用了.clone()方法，我错误地使用了.clone()方法导致了这个错误-它使LI元素的ID加倍，所以我得到了2个带有id="mov3“的LI。在使用.clone()时，我没有阅读足够的文档来了解克隆了什么东西。感谢你们的回答！