javascript - 难以应用两个不同的脚本

Question

我将此脚本嵌入到我网站的索引页中:

$(document).ready(function(){
    $(".bgtoggle").click(function () {
        $(".metro").toggleClass("bgcolorchange");
    });
});

脚本引用的 CSS 类如下所示:

.bgcolorchange {
    background-image: url("../images/mthc/imageN.jpg");
    -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  overflow : hidden ;
    margin:0;
    padding:0;
    z-index:3;
}

.metro {
background-image: url("../images/mthc/music-therapy-image1.jpg");
z-index : 2;
-webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  overflow : hidden ;
    margin:0;
    padding:0;
}

在不同的脚本文件中包含这段用于处理按钮点击的代码:

$('.fa-question-circle').parent().on('click', function () {
      $(".metro").css('background-image','url('+"../images/mthc/image2.jpg"+')');

我已经测试了第一个脚本，以便发生背景更改并且工作正常。但是，当我尝试将脚本用于我的“fa-question-circle”按钮时，图像不会发生变化并且 bgtoggle 也不起作用。

有什么建议为什么它不再起作用吗？

Answer 1

问题来自相对路径的差异，具体取决于指定路径的位置。在 CSS 文件中指定时，路径相对于该文件。当您将 url() 路径分配给 JavaScript 中的元素时，它相对于执行脚本的页面。

我猜您的样式表存储在一个子文件夹中，因此在进入图像文件夹之前转到父文件夹。而您的 JavaScript 可能在父文件夹中已有的页面中运行，因此它不需要在进入图像文件夹之前“上升一个文件夹”。