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"]; ?>'")';

OR

编辑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;
}

OR

修改你的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"]; ?> + ')';

希望有所帮助。

动态改变CSS背景图像

2 个答案: