jQuery-line $（this）.nextAll（'。toggled：first'）在Stack Snippet和JSFiddle中可用，但不在站点上

本文介绍了jQuery-line $（this）.nextAll（'。toggled：first'）在Stack Snippet和JSFiddle中可用，但不在站点上的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 我无法弄清楚为什么下面的代码在我的网站上无法正常工作，但在 JSFiddle 以及 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;光标：指针; text-decoration：none} < script src = https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js\"></script>< a class =togglerLinkhref =＃link>链路< / A>这里，在Toggler中有一个目的地。< br>< br>< p class =toggler>在这里切换。< / p>< div class =toggled>在JSFIddle中，或者在一个Stack Snippet（SO），这段代码工作正常。即使Toggler关闭，链接也会自动打开包含目标的切换。 ---那么，可能会出现什么问题，将其实施到网站中？ <峰; br> < br>< span id =linkstyle =color：green> Link-destination。< / span> < hr>< / div> 然后是： 链接不会自动打开使用 $（this）.nextAll（' 。.toggled：第一'）淡入（ 快）; 。因此，当Toggler关闭时，链接无处可通。 仍在工作： 手动切换 jQuery $（this）.next（）。slideToggle（slow）; }）。next（）。hide（）; 仍然正常工作。 c $ c>< a class =togglerLinkhref =＃link> link< / a> 在手动打开切换器时工作正常。 b 资料查找 我试图通过查找类似的帖子来杀死这个bug： / p> →：是 jQuery 包含两次？ →我认为不是。 →：忘记一些括号。 em> jQuery （document）.ready（ -function 。 也许这个奇怪的行为与括号或 jQuery文档就绪函数有关（$ / $> ） > 正常情况下，我在< script type =text / javascript>（function （$）{$（文件）。就绪（函数（）{$ ... ;}）;}）（jQuery的）LT /脚本> $ b 然而，在这个有问题的代码中，我有使用}）; }）（jQuery）关闭。因此，1 ; 少于前面。 调试 Firefox 35.0.1。 jQuery-1.10.2.min.js：1 （这也发生在没有有问题的代码的测试页面上） 使用// @表示sourceMappingURL pragmas已弃用。使用//＃来代替 ☞ jQuery-1.10.2.min.js：5 →仅此显示当点击链接时，Toggler关闭！ 不推荐使用getPreventDefault（）。 使用defaultPrevented代替。 Chrome 40.0 ... >开发工具>控制台）不给出任何警告。 解决方案 nextAll（）函数只检查DOM中相同或更深节点级别的元素。因此，您的代码可以使用以下HTML结构： < a class =togglerLinkhref =＃link> link< / a>这里，Toggler内有一个目的地。 < div class =toggled> < span id =linkstyle =color：green>链接目的地。< / span> < / div> 但是不要这样： < DIV> < a class =togglerLinkhref =＃link> link< / a>这里，Toggler内有一个目的地。 < / div> < div class =toggled> < span id =linkstyle =color：green>链接目的地。< / span> < / div> 解决方案是在jQuery代码中有一个更具体的选择器： $（。togglerLink）。click（function（）{ var id = $（this）.attr（'href'）; //将返回'#link'，我们可以使用ID选择器 $（id）.parents（'。toggled'）。fadeIn（fast）; // $（id）将选择ID为'link'的元素和'parents（）'将选择类'toggled'的父类。}）; 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>What is not working then is: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.Still working:Manual toggling with jQuery $(this).next().slideToggle("slow");}).next().hide(); still works fine.Also, the link <a class="togglerLink" href="#link">link</a> works fine when the toggler is opened manually.Literature look-upI tried to kill this bug by looking up similar posts:→: Is jQuery included twice? → I think not.→: Don't forget about some brackets.→: Use the jQuery (document).ready(-function.Perhaps the weird behavior has something to do with the brackets or the jQuery document ready function $(?Normally, I load my jQuery-codes in between <script type="text/javascript">(function($){$(document).ready(function(){$...;});})(jQuery)</script>.However, here, in this "problematic" code, I have to use });})(jQuery) to close. Thus with 1 ; less up front.DebuggingFirefox 35.0.1.jQuery-1.10.2.min.js :1 (this also occurs on test pages without the "problematic" code) Using //@ to indicate sourceMappingURL pragmas is deprecated. Use //# instead☞ jQuery-1.10.2.min.js :5 → This only shows when clicking the link, when the Toggler is closed! Use of getPreventDefault() is deprecated. Use defaultPrevented instead.Chrome 40.0... (View > Developer > Developer Tools > Console) gives no warnings. 解决方案 The nextAll() function only checks for elements on the same or deeper node-level in the DOM.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>But not with something like this:<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>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-line $（this）.nextAll（'。toggled：first'）在Stack Snippet和JSFiddle中可用，但不在站点上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！