php - 动态改变 CSS 背景图片

Question

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

我将信息存储在一个 PHP 数组中，我使用下面的函数调用我的索引页面(下面的代码位于一个名为 articles.php 的单独 PHP 文件中，该文件包含在我的 index.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")';

Here is my site up and running ，图像应放置在您将看到的空心圆圈中!任何帮助都会很棒，这对我来说很难!!

Answer 1

将硬编码的 javascript 与不起作用的 javascript 进行比较，我注意到您没有在 <?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"> 的语句输出以包含数据 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 中生成脚本。