如果 $(this) 引用的元素但 $('#id_of_element') 引用的元素则检索 .data() 有效答案

【问题标题】：Retrieving .data() works if element referenced by $(this) but not when by $('#id_of_element')如果 $(this) 引用的元素但 $('#id_of_element') 引用的元素则检索 .data() 有效
【发布时间】：2012-05-28 22:55:42
【问题描述】：

我正在编写一个 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>

【问题讨论】：

据我所知，这仅仅是因为没有附加名为'checkit'的数据。

标签： jquery jquery-plugins jquery-selectors

【解决方案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') );

【讨论】：

【解决方案2】：

啊，错误在错误的地方！我从我正在处理的插件中提取了这段代码，以显示我认为错误的地方，但真正的错误是在插件内部我正在使用 .clone() 方法和我对 .clone() 方法的错误使用犯了这个错误——它加倍了 LI 元素的 ID，所以我得到了 2 个 id="mov3" 的 LI。我没有阅读足够的文档来查看使用 .clone() 时克隆了哪些内容。谢谢大家的回答！

【讨论】：