Question

我的结构类似于

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

我创建了一个插件，使面板彼此对齐。我想看的面板的不透明度为1，其他面板的不透明度为0。

已创建公共函数，以允许选择另一个面板的不透明度为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);

该插件正在运行，但我需要使用此方法从公共函数中删除类名。我尝试了不同的方法，例如：

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

但我没有尝试工作。

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

Answer 1

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

所以这个：

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

变为：

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

这只是因为您使用String作为选择器。调用函数时不会这样做。相反，您只需使用函数和变量名称。

var $myThis = $(this);

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

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

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

方法版本采用一组，并将设置减少到索引处的项目。这给出了与选择器字符串版本相同的结果，但需要额外的步骤来减少初始设置。

编辑：我应该注意，当你执行$(this)时，如果this表示单个DOM元素，那么使用{{1}是没有意义的因为索引.eq()只有一个元素。

如果0表示jQuery对象，则不需要用this包装它。你可以$()。

Answer 2

请尝试$myThis.eq(panelNum)或$(this).eq(panelNum)：http://api.jquery.com/eq/

Answer 3

$myThis:eq(' + panelNum + ')...

JS语法无效......

我认为你可能正在努力实现这样的目标：

$myThis.filter(':eq(' + panelNum + ')')...

或

$myThis.eq(panelNum)...

Answer 4

这些建议都没有奏效。由于$（this）是一个对象数组，我尝试使用数组索引并且它有效。

以下是我所做的代码更改

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

   // public function
   $.fn.panel.transition = function(panelNum) {
      // $('.wrapper .panel:eq(' + panelNum + ')').css({...}); // <-- changed
      $(myThis[panelNum]).css({...});                          // <-- to this
   };        
});

$ this：eq（2）无法在插件中运行

4 个答案: