jQuery-line $（this）.nextAll（'。toggled：first'）在Stack Snippet和JSFiddle中工作，但不在现场

Question

我无法弄清楚为什么以下代码无法在我的网站上运行，但在 JSFiddle 以及 Stack Snippet < / EM>：

＆＃13;

＆＃13;

(function($) {
  $(document).ready(function() {
    $
    $(".toggler").click(function() {
      $(this).next().slideToggle("slow");
    }).next().hide();
    $(".togglerLink").click(function() {
      $(this).nextAll('.toggled:first').fadeIn("fast");
    });
  });
})(jQuery)

＆＃13;

.toggler {
  color: orange;
  text-decoration: underline
}
.toggler:hover {
  color: orange;
  cursor: pointer;
  text-decoration: none
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
The <a class="togglerLink" href="#link">link</a> here, has a destination inside the Toggler.
<br>
<br>

<p class="toggler">Toggle here.</p>
<div class="toggled">In JSFIddle, or in a Stack Snippet (SO), this code is working fine. Even when the Toggler is closed, the link automatically opens the Toggle that contains it destination. --- So, then what could be going wrong, implementing this into a website?
  <br>
  <br><span id="link" style="color:green">Link-destination.</span>
  <hr>
</div>

＆＃13;

＆＃13;

＆＃13;

那些不起作用的是：

• 该链接不会使用$(this).nextAll('.toggled:first').fadeIn("fast");自动打开所需的切换。因此，当Toggler关闭时，链接无处可去。

仍在工作：

• 使用 jQuery进行手动切换 $(this).next().slideToggle("slow"); }).next().hide();仍然正常。

• 此外，当手动打开切换器时，链接<a class="togglerLink" href="#link">link</a>正常工作。

文献查询

我试图通过查找类似的帖子来杀死这个错误：

• →： jQuery 包含两次吗？ →我想不是。

• →：不要忘记一些括号。

• →：使用 jQuery (document).ready( - 函数。

  • 也许奇怪的行为与括号或 jQuery文档就绪函数$（？
  有关）

通常情况下，我会在<script type="text/javascript">(function($){$(document).ready(function(){$ ... ;});})(jQuery)</script>之间加载我的jQuery代码。

然而，在这里，在这个＆＃34;有问题的＆＃34;代码，我 使用});})(jQuery)关闭。因此预先减少1 ;。

调试

---

• Firefox 35.0.1。

jQuery-1.10.2.min.js：1 （这也发生在没有＆＃34;有问题＆＃34;代码的测试页面上）

  

不推荐使用// @来表示sourceMappingURL pragma。使用//＃而不是

☞ jQuery-1.10.2.min.js：5 →这仅在点击链接时显示，当Toggler关闭时！

  

不推荐使用getPreventDefault（）。请改用defaultPrevented。

• Chrome 40.0 ... （查看＆gt;开发人员＆gt;开发人员工具＆gt;控制台）不会发出任何警告。

Answer 1

nextAll()函数仅检查DOM中相同或更深节点级别的元素。

因此，您的代码将使用以下HTML结构：

The <a class="togglerLink" href="#link">link</a> here, has a destination inside the Toggler.
<div class="toggled">
    <span id="link" style="color:green">Link-destination.</span>
</div>

但不是这样的：

<div>
    The <a class="togglerLink" href="#link">link</a> here, has a destination inside the Toggler.
</div>
<div class="toggled">
    <span id="link" style="color:green">Link-destination.</span>
</div>

解决方案是在jQuery代码中使用更具体的选择器：

$(".togglerLink").click(function() {
    var id = $(this).attr('href'); // will return '#link', which we can use as ID selector
    $(id).parents('.toggled').fadeIn("fast"); // The $(id) will select the element with ID 'link' and the 'parents()' will select the parent(s) with class 'toggled'.
});