如果 metabox 为空，则隐藏 html，使用自定义 post 类型

Question

我试图仅在元数据框已满时才显示 #firstimg，否则它只会显示一个空框，因为它正在搜索不存在的图像。

我正在使用 Custom Post Types 并且到目前为止我可以显示图像，但是一旦我尝试隐藏 #firstimg 它所做的就是弄乱我的代码（它不会显示网站的其余部分，我的控制台日志中也没有任何内容，所以我不知道我做错了什么）。

我假设我可能接近（希望如此？）但我没有正确编写代码。希望有人愿意帮助我！

  <img class="port-img" id="firstimg" src="
  <?php $key_1_value = get_post_meta($post->ID, 'ecpt_img_1', true); 
    if( ! empty( $key_1_value ) ) { 
    echo $key_1_value; 
    document.getElementById("firstimg").style.display = "block";}
  ?>">
  <img class="port-img" id="secondimg" src="<?php $key_2_value = get_post_meta($post->ID, 'ecpt_img_2', true); if( ! empty( $key_2_value ) ) { echo $key_2_value;}?>">
  <img class="port-img" id="thirdimg" src="<?php $key_3_value = get_post_meta($post->ID, 'ecpt_img_3', true); if( ! empty( $key_3_value ) ) { echo $key_3_value;}?>">

Answer 1

您的 php 中似乎有 javascript。也许尝试这样的事情？我假设您的 css 在 .port-img 或 #firstimg...

上没有 display: none

<?php $key_1_value = get_post_meta($post->ID, 'ecpt_img_1', true); 
if( !empty( $key_1_value ) ) : ?>  
   <img class="port-img" id="firstimg" src="<?php echo $key_1_value; ?>"/>
<?php endif; ?>
<img class="port-img" id="secondimg" src="<?php $key_2_value = get_post_meta($post->ID, 'ecpt_img_2', true); if( ! empty( $key_2_value ) ) { echo $key_2_value;}?>">
<img class="port-img" id="thirdimg" src="<?php $key_3_value = get_post_meta($post->ID, 'ecpt_img_3', true); if( ! empty( $key_3_value ) ) { echo $key_3_value;}?>">

Answer 2

您没有转义或回显您的 JavaScript，这是导致网站加载失败的原因（您遇到了致命错误）。

如果密钥不存在，为什么不完全阻止显示图像，如下所示：

$key_1_value = get_post_meta( $post->ID, 'ecpt_img_1', true );
$key_2_value = get_post_meta( $post->ID, 'ecpt_img_2', true );
$key_3_value = get_post_meta( $post->ID, 'ecpt_img_3', true );

if( $key_1_value ) echo '<img class="port-img" id="firstimage" src="'. $key_1_value .'" />';
if( $key_2_value ) echo '<img class="port-img" id="secondimage" src="'. $key_2_value .'" />';
if( $key_3_value ) echo '<img class="port-img" id="thirdimage" src="'. $key_3_value .'" />';

或者更好的是，您甚至可以将 1、2 和 3 作为数组循环（请注意，您必须将 CSS 从 #firstmage 更改为 #image-1等 - 但它确实简化了事情。您也不需要定义关键变量然后稍后检查它，因为 get_post_meta() 将 return a truthy value, or false 如果它不存在，所以你可以在定义它的同时比较它：

foreach( range(1,3) as $i ){
    if( $image_src = get_post_meta( $post->ID, "ecpt_img_$i", true ) ){
        echo "<img class='port-image' id='image-$i' src='$image_src' />";
    }
}

如果 metabox 为空，则隐藏 html，使用自定义 post 类型

Hide html if metabox is empty, using custom post types

wordpress

hide

display

meta-boxes