jQuery-line $（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 中效果很好：

 （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 ; 少于前面。





调试



< hr>




• Firefox 35.0.1。






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

< blockquote>


使用// @表示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-up

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

Debugging

---

• Firefox 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中可用，但不在站点上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！