Question

我构建了自己的jquery选项卡内容系统版本。基本标记如下。

func gestureRecognizer(gestureRecognizer: UIGestureRecognizer,
 shouldRecognizeSimultaneouslyWithGestureRecognizer
 otherGestureRecognizer: UIGestureRecognizer) -> Bool {...}

导航进入另一行

<div class="row" id="toShow>
    <div> 
        content
    </div>
    <div> 
        content
    </div>
    <div> 
        content
    </div>
</div>

以下是运行标签

的js

<div class="row" id="Links>
    <ul>
        <li>link</li><li>link</li><li>link</li><li>link</li>
    </ul>
</div>

如果我在第一部手风琴上有两部手风琴，并假设它是一个迭代/每个问题？我的问题是，无需做link1，links2等有没有办法让代码适用于每一组手风琴？也就是说，对于每组#toShow和#Links运行此代码？

Answer 1

这里的主要观点是，您需要一种方法来区分标签集1和标签集2的标签和内容，以便其中一个标签的点击不会影响另一个集。例如，$('.links li')会匹配两个集合中的所有链接，因此您最终会在标签集之间产生串扰，除非您限制选择器。

解决这个问题的方法很多。在这里，我将每个标签集的元素包装在一个包装元素中，并修改您的代码以单独处理每个包装器的内容：

＆＃13;

/* Init each tabset separately, using '.find' to limit the subsequent
   selector to act only within that node: */
$('.tabset').find('.toShow div:not(:first)').addClass("hide");
$('.tabset').find('.links li:first').addClass("active");

/* Now attach the event handlers to the links, again separately 
   for each tabset: */
$('.tabset').each(function() {
  var tabset = $(this); // so we don't collide with the 'this' inside the click handler below
  tabset.find(".links li").click(function() {
    tabset.find(".links li").removeClass('active');
    $(this).addClass("active");
    var identify = $(this).index();
    tabset.find(".toShow div:not(:eq(identify))").addClass("hide");
    tabset.find(".toShow div").eq([identify]).removeClass('hide');
  });
});

＆＃13;

.hide {
  display: none;
}
.active {
  font-weight: bold;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<span class="tabset">
     <div class="row links">
      <ul>
        <li>link 1</li><li>link 2</li><li>link 3</li>
      </ul>
    </div>
    <div class="row toShow">
      <div>content 1</div><div>content 2</div><div>content 3</div>
    </div>
</span>

<span class="tabset">
    <div class="row links">
      <ul>
        <li>link 1</li><li>link 2</li><li>link 3</li>
      </ul>
    </div>
    <div class="row toShow">
      <div>content 1</div><div>content 2</div><div>content 3</div>
    </div>
</span>

＆＃13;

（这可以通过将委派的点击事件绑定到tabset节点本身来改进，即$('.tabset').on('click','.links li', function() {...});而不是每个li的单个事件，但这不是你问的问题。）

如果您的DOM结构由于某种原因不允许添加该包装器节点，您可以改为依赖于文档顺序（限制每个.links行仅对下一个兄弟{{1}行动例如，行）或通过向每对添加数据属性（或类，或其他）（限制每个.toShow仅对.links[data-tabset="foo"]项也有.toShow）。这是一个仅使用文档顺序的示例：

＆＃13;

data-tabset="foo"

＆＃13;

/* Init is basically the same as the previous snippet: */
$('.toShow').find('div:not(:first)').addClass("hide");
$('.links').find('li:first').addClass("active");

$('.links li').click(function() {
  /* But here we need to traverse the DOM to find the correct sets
     of links and content blocks to act on.  This looks simpler, but
     is more fragile to document order changes, so I'd really recommend 
     the other approach, or an explicit identifier: */
  var linkRow = $(this).closest('.links');
  var showRow = linkRow.next('.toShow');
  var identify = $(this).index();
  
  // The rest is basically as before:
  linkRow.find('li').removeClass('active');
  $(this).addClass('active');

  showRow.find("div:not(:eq(identify))").addClass("hide");
  showRow.find("div").eq([identify]).removeClass("hide");
});

＆＃13;

.hide {
  display: none;
}
.active {
  font-weight: bold;
}

＆＃13;

Answer 2

是的，每个函数都有一个jQuery（）：

请参阅文档中的条目： http://api.jquery.com/jquery.each/

如何使用每个或迭代div？

2 个答案: