Question

我正在尝试通过点击链接来更改背景图片。在页面中，有一个php函数可以从目录中获取所有文件（只是图像），并为每个项目写下以下内容：

print("
    $(\"#photo" . "$curimage\").click(function(e){
    e.preventDefault();
    $(\"#galleryPhoto\").css(\"background-image\", \"url(images/ints/$file)\");
        });
");

整个代码（仅针对一个项目）最终看起来像这样：

<script type="text/javascript">
        $(function(){   

            $("#photo1").click(function(e){
                e.preventDefault(); 
                $("#galleryPhoto").css("background-image", "url(images/ints/001.jpg)");
            });

        return false;    
        }); 
</script>

在页面的正文中，还有另一个php部分执行相同的操作，但这次它提供了链接：

print("<a id=\"photo" . "$curimage\" href=\"#\" >Change</a>");

当然，这提供了一个完整的链接：

<a id="photo1" href="#" >Change</a>

此外，还有一个div为galleryPhoto的id，在css中有以下设置：

<div id='galleryPhoto'>
        Main photo here
</div>

#galleryPhoto {
    position: relative;
    height: 300px;
    width: 600px;
    background-color: black;
    background-image: url(../images/ints/blank.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    margin: 20px;
}

但是当点击链接时，背景图像不会改变。我对自己的错误毫无头绪。我已经尝试了很多不同的东西，代码可能现在都搞砸了，但我不知道为什么（JQuery新手，对不起）。

有人可以指出我正确的方向吗？

Answer 1

由于html是通过PHP动态生成的，因此请确保您使用.on功能。因此，只要您动态生成html，就最好使用.on功能。

所以不要使用它：

 $("#photo1").click(function(e){
      e.preventDefault(); 
      $("#galleryPhoto").css("background-image", "url(images/ints/001.jpg)");
 });

你会用这个：

 $(document).on('click', '#photo1', function(e){
      e.preventDefault(); 
      $("#galleryPhoto").css("background-image", "url(images/ints/001.jpg)");
 });

Answer 2

您必须设置#galleryPhoto div的高度和宽度，因为背景图像的高度和宽度基于它的容器。与<img>不同，如果没有定义，则获取图像的高度和宽度

JQuery和PHP - 更改背景图像

2 个答案: