0

我对 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")';

这是我的网站启动和运行，图像应该放在你会看到的空圆圈中！任何帮助都会很棒，这对我来说很难！

4

2 回答 2

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">输出语句以包含 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.ini 中生成脚本。

于 2013-07-07T20:13:38.620 回答
0

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

像这样做：

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

希望能帮助到你。

于 2013-07-07T19:47:56.270 回答