Question

我希望我在这里找不到明显的解决方案。以下代码仅间歇运行。如果您使用已清除的缓存/隐身模式加载，则在页面加载完成之前单击.gifslide两次 - 它会中断。打字，我知道这是多么具体，但无论如何，请帮助。

违规代码：

$(document).ready(function(){
    $(".gifslide").on('click', function () {
      $('.gifslide').toggle(); 
 // below is a workaround to make 
 // it appear the the image is sliding upward and not down.   
      $("#load-gif-container").slideToggle(500);
      $('.gif-content').slideToggle(500);  
    });
  });

它的HTML搭档：

  <div id="load-gif-container">
    <img src="{{'source.png' | asset_url}}" id="load-gif"  />
  </div>
  <div class="gifslide"><span>&#9650<br>Expand</span>
  </div>
  <div class="gif-content">
    <img src="{{ 'source.gif' | asset_url }}", id="gif-banner"/>
  </div>

你是我用液体编程但除此之外 - 这里的问题是什么？

更新/编辑：

当我说＆＃34;它打破＆＃34;我应该说＆＃34; .gif-content显示而不执行slideToggle。 #load-gif容器也没有切换但.gifslide确实＆＃34;。没有显示错误。它确实看起来很荒谬，但在控制台中没有任何帮助。

我回复了当前关于这个问题的评论，解释了我在尝试时发生了什么。

在＃gif-content内部的图像加载之前，我还尝试过不触发该功能。它没有用，但我觉得这就是问题源于此的地方。它是一个巨大的GIF，在折叠之上，被其他巨大的图像所包围。我不确定世界上是否有足够的压缩/最小化能让所有这些东西在有限的连接上顺利运行，但我希望我错了。

Answer 1

在文档准备就绪后，您可以点击事件绑定。在正常情况下重新加载页面时，您的脚本会被缓存，因此可以为您提供所需的功能。仅在隐身模式下或清除缓存后遇到此问题的原因是因为您的脚本未缓存，因此无法访问。您的脚本仍在加载，页面没有准备就绪，因此无法在您加载时点击/双击... ...

我还会推荐一些其他更改，这些更改会为您提供更好的性能（显然在文档准备就绪后）以及更一致的行为：

// from $(document).ready(function() {}); // to $(function() {}); // these are equivalent and the latter is more terse

如果您遇到文档中存在多个.gifslide的情况，则单击其中一个.gifslide会将该click事件传播给所有这些。此外，要清除与.gifslide相关的任何其他单击事件的事件队列，请在.on（）之前使用.off（）。您可以像这样解决这些问题：

$(function() { $('.gifslide').off('click').on('click', function(event) { event.preventDefault(); event.stopPropagation(); $(event.target).toggle(); }); });

还建议将元素缓存在变量中。在性能方面，触摸DOM非常昂贵。所以......

$(function() { var $gifSlide = $('.gifslide'), $loadGif = $('#load-gif-container'), $gifContent = $('.gif-content'); $gifSlide.off('click').on('click', function(event) { event.preventDefault(); event.stopPropagation(); $(event.target).toggle(); $loadGif.slideToggle(500); $gifContent.slideToggle(500); }); });

最后，因为你有一个嵌套在.gifslide中的span，如果有人点击了span，你可能最终会处理该目标上的click事件行为，而不是.gifslide（你想要的）。

$(function() { var $gifSlide = $('.gifslide'), $loadGif = $('#load-gif-container'), $gifContent = $('.gif-content'); $gifSlide.off('click').on('click', function(event) { event.preventDefault(); event.stopPropagation(); var $me = ($(event.target).is('.gifslide')) ? $(event.target): $(event.target).closest('.gifslide'); $me.toggle(); $loadGif.slideToggle(500); $gifContent.slideToggle(500); }); });

JQuery间歇性地工作

1 个答案: