Question

我有这个基本的搜索系统，其中包含卡片中的文章＆＃39;见here 有些文章包含图片，其他文章不包含。

我想只显示“图片框”。 div当其中有一张图片时，instead of having a blank white space when there's no picture. 我如何只删除＆＃39;图片框＆＃39;没有图像的div？

PHP：

$sql = "SELECT * FROM article ORDER BY a_id DESC LIMIT 3";
        $result = mysqli_query($conn, $sql);
        $queryResults = mysqli_num_rows($result);

        if ($queryResults > 0) {
            while ($row = mysqli_fetch_assoc($result)) {

        echo "<a href='article.php?title=".$row['a_title']."&date=".$row['a_date']."'>
               <div class='article-wrapper'>

                    <div class='picture-box'>
                     <img src='".$row['picture']."' class='picture'>
                    </div>

                    <p class='text'>".$row['text']."</p>

                 </div>
              </a>";
            }
          }

CSS：

.picture {
    position:absolute;
    left: -100%;
    right: -100%;
    top: -100%;
    bottom: -100%;
    margin: auto;
    max-width: 100%;
    height: auto;
}

.picture-box {
    width: 560px;
    height: 300px;
    overflow: hidden;
    position: relative;
}

我试过了：

PHP：

<img src='".$row['picture']."' class='picture' onerror="imgError(this)">

jquery：

function imgError(img) {
    img.error="";
    $(img).parent().remove();
}

- 但它删除了“图片框”＆＃39;从所有文章而不是具体文章中划分。

Answer 1

应为$(img).parent().remove();。

Answer 2

为什么甚至首先创建div并依赖jQuery来清理混乱？只需在最初创建页面时向PHP添加if语句，如果没有值，则不要添加图片。

echo "<a href='article.php?title=".$row['a_title']." date=".$row['a_date']."'>
           <div class='article-wrapper'>";

                if(trim($row['picture']) != ''){
                    echo "<div class='picture-box'>
                        <img src='".$row['picture']."' class='picture'>
                    </div>";
                }

                echo "<p class='text'>".$row['text']."</p>

             </div>
          </a>";

删除具有特定条件的行内的div

2 个答案: