Question

我有两个div .curation-contents-list和.film-contents-list，每个div都有一个链接列表，当点击一个链接时，会发出一个AJAX调用，它将一些JSON数据附加到一个单独的div .article-container和.project-container。同时，数据附加div，其中隐藏了刚刚单击的链接的链接。

还有另一个可以单击类.panel-close的div，它会删除刚刚附加数据的div，并使包含链接的div再次出现。所以一切都恢复到原始状态

问题是需要再次点击.panel-close div才能触发jQuery中的.empty()和.show()函数。一旦完成这个，jQuery第一次按原样运行。任何有关此事的帮助将不胜感激。

我的HTML基本设置：

<div class="curation-panel">
 <div class="curation-contents-list">
   <a class="load-article"></a>
 </div>

 <div class="article-container">
 </div>
</div>

<div class="film-panel">
 <div class="film-contents-list">
   <a class="load-project"></a>
 </div>

 <div class="project-container">
 </div>
</div>

<div class="panel-close">
</div>

的jQuery

$('.load-article').on('click', function(e) {
  e.preventDefault();
  var target  = $('.article-container');
  var url   =$(this).data('page') + '.json';

  $.get(url, function(data) {
    $('.curation-contents-list').hide();
    $(target).append(data);
    $("body").addClass("load-article-is-open"),
    $(this).animate({
        scrollTop: 0
    }, 300, "easeInOutExpo")
  });
}),

$('.load-project').on('click', function(e) {
  e.preventDefault();
  var target  = $('.project-container');
  var url   =$(this).data('page') + '.json';

  $.get(url, function(data) {
    $('.film-contents-list').hide();
    $(target).append(data);
    $("body").addClass("load-project-is-open"),
    $(this).animate({
        scrollTop: 0
    }, 300, "easeInOutExpo")
  });
}),

$(".panel-close").click(function() {
    $("body").removeClass("curation-panel-is-open").removeClass("film-panel-is-open").removeClass("load-article-is-open").removeClass("load-project-is-open"),
    $(".curation-panel").animate({
        scrollTop: 0
    }, 300, "easeInOutExpo"),
    $(".film-panel").animate({
        scrollTop: 0
    }, 300, "easeInOutExpo"),

    $('.curation-contents-list').show();
    $('.film-contents-list').show();
    $('.article-container').empty();
    $('.project-container').empty();
});

Answer 1

这似乎可以解决问题，试一试。将动画更改为scrolTop，在正确的位置放入分号

$(".panel-close").click(function() {

$("body").removeClass("curation-panel-is-open").removeClass("film-panel-is-open").removeClass("load-article-is-open").removeClass("load-project-is-open");

$(".curation-panel").scrollTop( 300, "easeInOutExpo");

$(".film-panel").scrollTop( 300, "easeInOutExpo");

$('.curation-contents-list').show();
$('.film-contents-list').show();
$('.article-container').empty();
$('.project-container').empty();
});

您也可以通过以下方式简化代码：

$(".panel-close").click(function() {

$("body").removeClass("curation-panel-is-open film-panel-is-open load-article-is-open load-project-is-open");


$(".film-panel, .curation-panel").scrollTop( 300, "easeInOutExpo");

$('.curation-contents-list, .film-contents-list').show();

$('.article-container, .project-container').empty();

});

（第二种方法未经测试）

Answer 2

我同意Andy的观点，你应该使用分号而不是逗号作为你的行结尾。但是，可能导致问题的原因是错过了对 jQuery Easing 库的依赖。检查控制台是否有错误，例如

easeInOutExpo is not a function

表示您缺少 the jQuery Easing library 。

仅为了概念证明， here's a working Fiddle

以及对冒号的相关变化：

$("body").removeClass("curation-panel-is-open film-panel-is-open load-article-is-open load-project-is-open");
$(".curation-panel").animate({
    scrollTop: 0
}, 300, "easeInOutExpo");
$(".film-panel").animate({
    scrollTop: 0
}, 300, "easeInOutExpo");

请注意，我已删除了removeClass链，而是将其替换为间隔列表。没有理由重新调用该函数每次要删除同一元素上的类时。

jQuery empty仅在AJAX调用后的第二次单击时起作用

2 个答案: