Question

我正在使用jQuery和PHP的组合为三维大小的全宽响应图片制作模板。我做了什么，但我很快就明白我需要为每个Div指定特定的ID，以便为每个Div设置一个自定义图像。我怀疑我的PHP有问题，因为它在我回复ID之前工作正常。 Here is an example of how it SHOULD work（查看标题图片。）

HTML:
<!-- template 1 -->
<?php 
$imageregular = 'http://placekitten.com/1920/500'; //1920 x 500
$imagesmall   = 'http://placekitten.com/1280/350'; //1280 x 350
$imagemobile  = 'http://placekitten.com/630/250'; // 630 x 250
$id = 'aboutpic00';
include '../fullimage.php';
?>

<!-- template again with different ID --?

<?php 
$imageregular = 'http://placekitten.com/1920/500'; //1920 x 500
$imagesmall   = 'http://placekitten.com/1280/350'; //1280 x 350
$imagemobile  = 'http://placekitten.com/630/250'; // 630 x 250
$id = 'aboutpic01';
include '../fullimage.php';
?>

CSS：

.bg
 {
     height: 350px;
    background-color:#cccccc;
    display:block;
    background-position:center;
    /* and so on for all the media widths.  The CSS probably isn't important, it just establishes the background color and background position. */
 }

PHP模板（HTML中引用的fullimage.php）

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

//jQuery determines the width of my browser window and executes the following conditions

    var width = $(window).width();
        if(width<=630){
             $("#<?php echo $id;?>").css("background-image", "url(<?php echo $imagemobile;?>)");

//if the width is a certain amount, jQuery will change the CSS on my specified #ID Div using the php echo $id

        }else if(width>=630 && width<1280){
             $("#<?php echo $id;?>").css("background-image", "url(<?php echo $imagesmall;?>)");
        }else if(width>1280){
             $("#<?php echo $id;?>").css("background-image", "url(<?php echo $imageregular;?>)");
        }

//The following function is a repeat of the former, but while the window is resizing. I bet I can combine the two but this fix was easier at the time. 

    $(window).resize(function() {
        var width = $(window).width();
        if(width<=630){
             $("#<?php echo $id;?>").css("background-image", "url(<?php echo $imagemobile;?>)");
        }else if(width>=630 && width<1280){
             $("#<?php echo $id;?>").css("background-image", "url(<?php echo $imagesmall;?>)");
        }else if(width>1280){
             $("#<?php echo $id;?>").css("background-image", "url(<?php echo $imageregular;?>)");
        }
    }); 
});
</script>



<div id="#<?php echo $id;?>" class="bg"></div>  //This is the final HTML output of the PHP include that echoes out the div with the custom ID and "bg" class I specified in the CSS

现在，我应该得到可爱的小猫，但我只是得到了我的灰色背景颜色。我哪里错了？

编辑：我的错误在于<div id="#<?php echo $id;?>" class =“bg”＆gt;我包含了不应包含在ID中的“＃”。我很快就会删除这个帖子。

Answer 1

你的问题是因为你的div id =“＃aboutpic01”而在jQuery中你正在寻找“aboutpic01”，只需从你的div中删除“＃”符号

为什么我的照片不会出现？

1 个答案: