動態更改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"]; ?> + ')';

希望能幫助到你。