jQuery行$(this).nextAll(' .toggled:first')可在Stack Snippet和JSFiddle中使用，但不适用于现场 [英] jQuery-line $(this).nextAll('.toggled:first') works in Stack Snippet and JSFiddle, but not on site

问题描述

我不知道为什么以下代码在我的网站上不起作用，但是在 JSFiddle 以及 Stack Snippet 中的效果很好:

I can't figure out why the following code doesn't work on my site, but works great on JSFiddle, as well as here in a Stack Snippet:

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

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

<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>

那是行不通的:

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

• The link doesn't automatically opens the required Toggle using $(this).nextAll('.toggled:first').fadeIn("fast");. Thus, the link leads nowhere when the Toggler is closed.

仍在工作:

• 使用 jQuery $(this).next().slideToggle("slow"); }).next().hide();手动切换仍然可以正常工作.

• Manual toggling with jQuery $(this).next().slideToggle("slow"); }).next().hide(); still works fine.

此外，当手动打开切换开关时，链接<a class="togglerLink" href="#link">link</a>也可以正常工作.

Also, the link <a class="togglerLink" href="#link">link</a> works fine when the toggler is opened manually.

我试图通过查找类似的帖子来消除此错误:

I tried to kill this bug by looking up similar posts:

• →: jQuery 是否包含两次? →我认为不是.

• →: Is jQuery included twice? → I think not.

→:请不要忘记一些括号.

→: Don't forget about some brackets.

→:使用 jQuery (document).ready(-函数.

→: Use the jQuery (document).ready(-function.

• 也许怪异的行为与括号或 jQuery文档就绪函数$(?

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

Normally, I load my jQuery-codes in between <script type="text/javascript">(function($){$(document).ready(function(){$...;});})(jQuery)</script>.

但是，在这里，在此有问题的"代码中，我必须使用});})(jQuery)关闭.因此，前面的;少了1个.

However, here, in this "problematic" code, I have to use });})(jQuery) to close. Thus with 1 ; less up front.

• Firefox 35.0.1.

jQuery-1.10.2.min.js:1 (在没有有问题"代码的测试页上也会发生这种情况)

jQuery-1.10.2.min.js :1 (this also occurs on test pages without the "problematic" code)

使用//@表示不建议使用sourceMappingURL编译指示.使用//#代替

Using //@ to indicate sourceMappingURL pragmas is deprecated. Use //# instead

☞ jQuery-1.10.2.min.js:5 →仅在关闭切换器时单击链接时显示！

☞ jQuery-1.10.2.min.js :5 → This only shows when clicking the link, when the Toggler is closed!

不赞成使用getPreventDefault().改用defaultPrevented.

Use of getPreventDefault() is deprecated. Use defaultPrevented instead.

• Chrome 40.0 ... (查看">开发人员">开发人员工具">控制台")没有警告.
• Chrome 40.0... (View > Developer > Developer Tools > Console) gives no warnings.

推荐答案

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

The nextAll() function only checks for elements on the same or deeper node-level in the DOM.

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

So your code will work with the following HTML structure:

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代码中有一个更具体的选择器:

The solution is to have a more specific selector in your jQuery code:

$(".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'.
});

这篇关于jQuery行$(this).nextAll(' .toggled:first')可在Stack Snippet和JSFiddle中使用，但不适用于现场的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！