javascript - 为什么我的图片不会出现？

<分区>

这个问题是由于错别字或无法再重现的问题引起的。虽然类似的问题可能是on-topic在这里，这个问题的解决方式不太可能帮助 future 的读者。

关闭 9 年前。

我正在结合使用 jQuery 和 PHP 来制作具有三种尺寸的全 Angular 响应式图片模板。我所做的工作有效，但我很快明白我需要为每个 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"> 我包含了不应包含在 ID 中的“#”。我会尽快删除此线程。

最佳答案

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

关于javascript - 为什么我的图片不会出现？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21266600/