0

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

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%');
});

有任何想法吗？

4

1 回答 1

1

您在最后一次迭代中设置每个 .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-14T16:29:24.287 回答