jquery - $这个:eq(2) is not working in a plugin

Question

我的结构类似于

<div class="wrapper">
    <div class="panel">   </div>
    <div class="panel">   </div>
        :
</div>

我创建了一个插件来将面板相互对齐。我想要查看的面板的不透明度为 1，其他面板的不透明度为 0。

已创建一个公共(public)函数，以允许选择另一个面板的不透明度为 1。

插件看起来像:

(functon($) {
   var someGlobalVars;
   $.fn.panel = function(options} {
      // some logic
      $(this).each(function(index) {
         $(this).css({...});
      )};

   // public function
   $.fn.panel.transition = function(panelNum) {
      $('.wrapper .panel:eq(' + panelNum + ')').css({...}); // <-- works
   };        
});

该插件的名称为:

$('wrapper .panel').panel();
$('wrapper .panel').panel.transition(2);

该插件正在工作，但我需要使用 this.properties 从公共(public)函数中删除类名。我尝试了不同的方法，例如:

var $myThis = $(this);
$myThis:eq(' + panelNum + ').css({...});

但我尝试的任何方法都不起作用。

有人可以提供我可以尝试的建议吗？

Answer 1

第一次使用+ panelNum + 的原因是您要连接一个字符串。

所以这个:

$('.wrapper .panel:eq(' + panelNum + ')')

变成:

$('.wrapper .panel:eq( 5 )')  // or whatever the number was

这只是因为您使用字符串作为选择器。当您调用函数时，这不会完成。相反，您只需使用函数和变量名称即可。

var $myThis = $(this);

$myThis.eq( panelNum ).css({...});

根据设计，jQuery 提供了“选择器字符串”版本和类似的方法版本。这是因为有时会同时使用这两种形式。

选择器字符串版本为您提供一个立即结果，即索引处的项目。

该方法版本采用一个集合，并将该集合减少到索引处的项目。这将为您提供与选择器字符串版本相同的结果，但需要减少初始集的额外步骤。

<小时/>

编辑:我应该注意，当你执行$(this)时，如果this代表单个DOM元素，那么它就不会'使用 .eq() 没有意义，因为索引 0 处只有一个元素。

如果this代表一个jQuery对象，那么你不需要用$()包装它。您只需执行 this.eq( panelNum )。