JQuery 在页面刷新之前不会运行

Question

我有一个简单的脚本来隐藏和显示某些按钮，但是在重新加载页面之前，javascript 不会运行。一旦用户单击该链接，我怎样才能让它运行？例如，当用户第一次链接到页面时，页面是否已经隐藏了某些 div。

var array = [".section-1", ".section-2", ".section-3", ".section-4", ".section-5"];

var cnt = 0;

$(function() {
    for(var i = 0; i < 5; i++) {
        $(array[i]).hide();
    }
    $(array[cnt]).show();
    $(".previous").hide();
    $(".next").click(function () {
        if(cnt < 4){
            $(array[cnt]).hide();
            cnt++;
            $(array[cnt]).show();
        }
        if (cnt == 4) {
            $(".next").hide();
        }
        if(cnt > 0) {
            $(".previous").show();
        }

    });

    $(".previous").click(function (){

        if(cnt > 0) {
            $(array[cnt]).hide();
            cnt--;
            $(array[cnt]).show();
        }


        if(cnt < 4){
            $(".next").show();
        }
        if(cnt == 0){
            $(".previous").hide();
        }

    });
});

这是清单文件。

// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file.
//
// Read Sprockets README (https://github.com/sstephenson/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require users

Answer 1

你的问题是turbolinks

问题在于 Turbolinks 会阻止您的 JS “正常”加载，因为它每次都会通过 ajax 重新加载您的页面主体（破坏您的 JS，因为您的所有事件都不会被绑定）

对此的两种解决方案是编写您的 JS 以使用 Turbolinks，或者使用 jquery-turbolinks 来实现更自然的解决方案

如果你想让你当前的代码与 Turbolinks 一起工作，你可以使用这个：

var ready = function(){

    var array = [".section-1", ".section-2", ".section-3", ".section-4", ".section-5"];
    var cnt = 0;

    for(var i = 0; i < 5; i++) {
        $(array[i]).hide();
    }
    $(array[cnt]).show();
    $(".previous").hide();
    $(".next").click(function () {
        if(cnt < 4){
            $(array[cnt]).hide();
            cnt++;
            $(array[cnt]).show();
        }
        if (cnt == 4) {
            $(".next").hide();
        }
        if(cnt > 0) {
            $(".previous").show();
        }

    });

    $(".previous").click(function (){

        if(cnt > 0) {
            $(array[cnt]).hide();
            cnt--;
            $(array[cnt]).show();
        }


        if(cnt < 4){
            $(".next").show();
        }
        if(cnt == 0){
            $(".previous").hide();
        }

    });
});

$(document).on("page:load ready", ready);

Answer 2

这似乎是 css 的工作。您可以在页面加载之前使用 css 将 div 上的显示属性设置为“无”，然后一旦 javascript 开始运行，您就可以决定是否显示它们。

作为将来参考的注释，JS 在页面刷新之前不会运行的原因是因为您的所有 javascript 都在 $(function() {}) 方法中，该方法在页面加载完成之前不会执行。

您还可以在 ready 函数之外添加几行代码以立即执行代码。这样做不太可取，因为损坏的 javascript 会阻止您的页面加载。