javascript - JQuery 和 PHP - 更改背景图片

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>

另外还有一个id为galleryPhoto的div，在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)");
 });