2

我对一个我似乎无法弄清楚的问题感到头疼，并且仔细阅读了所有我能找到的类似问题，但无济于事。

我有一个 laravel 5.3 项目，使用 twitter bootstrap 3.3.7 和缩小的 jquery 3.1.1。

Jquery 通过 CDN 包含在内。

脚本加载的顺序如下，它们是在 , 之后加载<footer>的<body>，除了 jquery 是在 末尾加载的<head>：

  • jQuery
  • app.js（laravel 构建了这个，它包括引导程序）
  • jQuery UI
  • 我的自定义 javacript 文件

基本上这是做什么的，有2个按钮。完整和不完整，为了简单起见，我们现在将它们称为 A 和 B。每一个都与一个 div 相关联。在页面加载时，所有内容都被隐藏。当您单击 A 时，它将显示 div A，如果尚未隐藏，则隐藏 div B。当您单击 B 时，它将执行相同但相反的操作。

令人沮丧的部分？正如预期的那样，这在我的 Web 应用程序的 XAMPP 本地版本中本地运行完美，没有错误。然而，当移动到实时服务器时，在我（认为）几乎相同的环境中，它可以正常工作 80%。

当你点击A时，它会显示A。（好）

当你点击 B 时，它会显示 B。（好）

当您单击 A 或 B 时，它不会像本地那样隐藏相反的 div。（坏）

因此，例如，您单击 A，然后单击 B，现在您可以同时看到 A 和 B div 而不仅仅是 B。

这是相关的 javascript 片段。例如，您可以看到该$('#complete-'+eid).collapse('hide');行是在本地工作但不在服务器上工作的行。

`$('.incomplete-btn, .complete-btn').on('click', function(){
    if($(this).hasClass('has-response')){ 
        return;
    }
    var eid = $(this).attr('href').substr($(this).attr('href').length -1, 1);
    if($(this).hasClass('incomplete-btn')){
        if($(this).hasClass('lightgrey')){
            $(this).removeClass('lightgrey');
            $(this).addClass('orange')
        }else{
            $(this).addClass('lightgrey');
            $(this).removeClass('orange');
        }
        $('#complete-'+eid).collapse('hide');  //hide complete-btn
        $('#complete-btn-'+eid).addClass('lightgrey');
        $('#complete-btn-'+eid).removeClass('orange');
    }
    if($(this).hasClass('complete-btn')){
        if($(this).hasClass('lightgrey')){
            $(this).removeClass('lightgrey');
            $(this).addClass('blue')
        }else{
            $(this).addClass('lightgrey');
            $(this).removeClass('blue');
        }
        $('#incomplete-'+eid).collapse('hide');  //hide incomplete-btn
        $('#incomplete-btn-'+eid).addClass('lightgrey');
        $('#incomplete-btn-'+eid).removeClass('blue');
    }
});`

我已经移动了脚本，并在开发工具中检查了它们以查看它们何时加载。（我最初认为这与脚本或类似内容无法访问的隐藏 div 有关）。我尝试推迟脚本加载，或者在页面加载时不隐藏 div，但这些都没有改变我遇到的问题。

我不知所措，将不胜感激任何见解。

谢谢大家

编辑：

我制作的一个例子的小提琴：https ://jsfiddle.net/3o0Lfw7n/18/

编辑2：

简化的代码，仍然可以在本地工作，仍然不能在服务器上工作。任何浏览器或设备上都没有控制台错误。（它可以正常折叠/打开，一直存在的问题是当您打开一个时，另一个没有正确关闭。

$(function() {
 $('.incomplete-btn, .complete-btn').on('click', function(){

    var clicked_btn = $(this);
    var eid = clicked_btn.attr('href').substr(clicked_btn.attr('href').length -1, 1);
    if(clicked_btn.hasClass('incomplete-btn')){
        $('#complete-'+eid).collapse('hide');
    }
    if(clicked_btn.hasClass('complete-btn')){
        $('#incomplete-'+eid).collapse('hide');
    }
    });
});
4

0 回答 0