将img更改为PHP循环中的背景图像jQuery

我试图使用jQuery将加载的img标记转换为背景图像，但是，图像正在PHP while循环中加载。当我尝试实现jQuery时，jQuery只查看最后一个img标签。这里是我的代码将img更改为PHP循环中的背景图像jQuery

PHP

$query = mysqli_query($dbleads, "SELECT * FROM plugin_blog WHERE published = 1 ORDER BY date_added DESC LIMIT 0,20"); 
$i = 0; 
$j=-1; 
while ($row=mysqli_fetch_array($query)){ 
    preg_match('/(<img[^>]+>)/i', $row['html'], $matches); 
    $img = $matches[1]; 
    ++$i; 
    if ($i%2 == 0){ 
     ++$j; 
     echo "<div class='masonryImage tweets' style='width:300px; height:175px;'><div class='tweet-content'>" . $tweets[$j] . "</div></div>"; 
    } 
    else{ 
     echo "<div class='masonryImage blogImage' style='width: 300px; height:200px;'>" . $img . " </div>"; 
    } 
}

jQuery的

$j('div.blogImage img').each(function() { 
    var imageSrc = $j(this).attr('src'); 

    $j(this).remove(); 
    $j('.blogImage').html('<div class="backbg"></div>'); 
    $j('.backbg').css('background-image', 'url(' + imageSrc + ')'); 
    $j('.backbg').css('background-repeat','no-repeat'); 
    $j('.backbg').css('background-position','center'); 
    $j('.backbg').css('background-size','cover'); 
    $j('.backbg').css('width','100%'); 
    $j('.backbg').css('height','100%'); 
});

任何想法？

来源

2013-10-14 Matt Maclennan

什么是$ J用JavaScript的？如果您尝试使用jQuery对象，它可能是“jQuery”或“$”。你有没有检查你的JavaScript控制台？我怀疑$ j导致错误。 –

您好，我正在加载另一个Javascript库，所以$ j通过noConflict替换$/jQuery :) –

您正在设置上一次迭代中的每个.backbg的css。
当你上次运行$j('.backbg').css('background-image', 'url(' + imageSrc + ')');时，你会说“找到每一个.backbg，甚至是我已经完成的，并设置了他们的CSS”。

你需要做的是这样的：

var imageSrc = $j(this).attr('src'); 
var blogImg = $j(this).parent(); 
$j(this).remove(); 
blogImg.html('<div class="backbg"></div>'); 
blogImg.find('.backbg').css('background-image', 'url(' + imageSrc + ')');

来源

2013-10-14 16:29:24 dave

工作了一段时间，刚刚在CSS文件中添加了.backbg的css。非常感谢：） –

将img更改为PHP循环中的背景图像jQuery

回答

相关问题