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

我将这个脚本嵌入到我网站的索引页面中：

$(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也无效。

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

最佳答案

问题来自相对路径的不同，具体取决于指定该路径的位置。在CSS文件中指定时，路径是相对于该文件的。在JavaScript中为元素分配url()路径时，该路径相对于脚本在其中执行的页面。

我猜您的样式表存储在一个子文件夹中，因此在进入图像文件夹之前，请先转到父文件夹。尽管您的JavaScript可能正在父文件夹中已经存在的页面中运行，所以在下降到images文件夹之前不需要“上一个文件夹”。