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"+')');

我已经测试了第一个脚本以便进行后台更改，这样可以正常工作。但是，当我尝试将脚本用于我的＆＃34; fa-question-circle＆＃34;按钮，图像的变化没有发生，并且bgtoggle也不起作用。

为什么它不再起作用的任何建议？

Answer 1

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

我猜测您的样式表存储在子文件夹中，因此请在下降到images文件夹之前转到父级。虽然您的JavaScript可能在已存在于父文件夹中的页面中运行，但它并不需要＆＃34;上一个文件夹＆＃34;在下降到图像文件夹之前。

难以应用两种不同的脚本

1 个答案: