动态更改CSS背景图像

Question

我对PHP和Javascript都还很陌生，因此请原谅我的无知和术语使用不当，但我会尽力解释我正在努力实现的目标。

我将信息存储在PHP数组中，使用以下函数可以将其调用到索引页面（以下代码位于index.php中包含的单独的PHP文件中，名为articles.php）：

<?php

function get_news_feed($article_id, $article) {

  $output = "";

  $output .= '<article class="img-wrapper">';
  $output .= '<a href="article.php?id=' . $article_id . '">';
  $output .= '<div class="news-heading">';
  $output .= "<h1>";
  $output .= $article["title"];
  $output .= "</h1>";
  $output .= "<p>";
  $output .= "Read more...";
  $output .= "</p>";
  $output .= "</div>";
  $output .= '<div id="news-img-1">';
  $output .= "</div>";
  $output .= "</a>";
  $output .= "</article>";

  return $output;
} 

$articles = array();
$articles[] = array(
  "title" => "Andy at NABA",
  "description" => "Docendi, est quot probo erroribus id.",
  "img" => "img/gym-01.jpg",
  "date" => "05/04/2013" 
);
$articles[] = array(
  "title" => "Grand Opening",
  "description" => "Docendi, est quot probo erroribus id.",
  "img" => "img/gym-01.jpg",
  "date" => "05/04/2013" 
);

?>

我的index.php看起来像以下内容减去一些在此过程中不起作用的HTML：

<?php 
include("inc/articles.php");
?>

<?php
$pageTitle = "Home";
include("inc/header.php"); 
?>

<section class="col-4 news">

    <?php

    $total_articles = count($articles);
    $position = 0;
    $news_feed = "";

    foreach($articles as $article_id => $article) {

    $position = $position + 1;
        if ($total_articles - $position < 2) {
            $news_feed .= get_news_feed($article_id, $article);
        }
    } 

    echo $news_feed;

    ?>

</section>

我的目标是使用Javascript动态更改ID为news-img-1的div元素的CSS Background-Image属性。

我已经尝试过诸如：

document.getElementById('news-img-1').style.backgroundImage = 'url('<?php $article["img"]; ?>')';

document.getElementById('news-img-1').style.backgroundImage = 'url('http://www.universalphysique.co.uk/' + '<?php $article["img"]; ?>')';

document.getElementById('news-img-1').style.backgroundImage = 'url('window.location.protocol + "//" + window.location.host + "/" + '<?php $article["img"]; ?>')';

.....但是我无处可去！ 我的代码在实践中有效，因为以下Javascript可以正确插入图像：

document.getElementById('news-img-1').style.backgroundImage = 'url("img/gym-01.jpg")';

这是我的网站，正在运行 ，图像应放置在您将看到的空白圆圈中！ 任何帮助都会很棒，这对我来说很难！

Answer 1

比较硬编码的javascript和不起作用的javascript，我注意到您没有在<?php $article["img"]; ?>周围加上双引号<?php $article["img"]; ?> <?php $article["img"]; ?>片段。 硬编码显示

= 'url("img/gym-01.jpg")'

但是带有php片段的将产生

 = 'url(img/gym-01.jpg)'

所以也许如果您将其修改为

document.getElementById('news-img-1').style.backgroundImage = 'url("'<?php $article["img"]; ?>'")';

要么

如下编辑get_news_feed函数：

替换这些行

$output .= '<div id="news-img-1">';
$output .= "</div>";

同

$output .= '<div class="news-img"><img src="' . $article["img"] . '"></div>' ;

并像这样更改您的css：

article.img-wrapper {
    position: relative;
}

div.news-img {
    position: absolute;
    top: 0;
    z-index: -1000;
}

要么

修改您的get_news_feed函数，将<div id="news-img-1">输出的语句更改为包括data-url属性，例如：

$output .= '<div class="news-img" data-url="' . $article["img"] . '">';

然后添加一个jquery语句，例如：

$(".news-img").each( function() { 
        $(this).css("background-image", "url(" + $(this).data("url") +")" ); 
    });

jquery语句位于静态js文件中，而不是在php中生成脚本。

Answer 2

您需要从PHP标记中删除引号，然后查看它是否有效！

像这样做：

document.getElementById('news-img-1').style.backgroundImage = 'url(' + <?php $article["img"]; ?> + ')';

希望能帮助到你。