Question

我有以下标签功能：

//Tabs ///
$('.tabs').each(function() {
  var $tabs = $(this);
  $tabs.find('.section-body > div:not(:first-child)').hide().end()
 .find('.section-head a:eq(0)').addClass('active').end()
 .find('.section-head a').on('click', function() {

    $tabs.find('.section-head a').removeClass('active').end()

  .find('.section-body > div:eq(' + $(this).index() + ')').show().siblings().hide();
    $(this).addClass('active');
  });
});

它起作用，但是$(this).index()与另一个插件冲突，而另一个插件在$(this).index()存在时停止工作。是否有不同的方法来实现相同的选项卡结果而不使用$（this）.index（）？

如果需要，这是HTML：

<div class="section tabs">
  <div class="section-head">
    <a>Section A</a>
    <a>Section B</a>
  </div>
  <div class="section-body">
    <div>
      <p>Section A</p>
    </div>
    <div>
      <p>Section B</p>
    </div>
  </div>
</div>

这是一个JS小提琴：http://jsfiddle.net/qEgg5/1/

Answer 1

你有两个解决方案

首先，不应该有任何含糊之处。所以更改插件的名称。它容易腻。
其次，如果您不想先做，请按照以下说明操作：

在加入插件之前，请执行以下操作：

$.fn.myIndex = $.fn.index;

上面做的是，它创建了一个新的插件myIndex，它传递了index的函数引用。现在，您可以使用$(this).myIndex()提供与$(this).index()相同的效果，但不会产生歧义。

Answer 2

您可以（并且应该）使用传递给.each()：

参数的参数

.each（function）

function
Type: Function( Integer index, Element element )
A function to execute for each matched element

因此它会变成：

$('.tabs').each(function(idx, elt) {
  var $tabs = $(elt);// $(elt) is equivalent to $(this)
  $tabs.find('.section-body > div:not(:first-child)').hide().end().find('.section-head a:eq(0)').addClass('active').end().find('.section-head a').on('click', function() {
    $tabs.find('.section-head a').removeClass('active').end().find('.section-body > div:eq(' + idx + ')').show().siblings().hide();
    $(elt).addClass('active');
  });
});

Further info here

Answer 3

不能只是简单地使用jQuery表示法

jQuery(this).index();

或者如果真的需要将jquery放到noConflict模式

jQuery.noConflict();

现在$ control被返回到其他库。在这里查看更多： http://api.jquery.com/jquery.noconflict/

$（this）.index（）替代方案？

3 个答案: