javascript - 尝试制作一个按钮，仅显示设置了值或变量的项目

Question

我在正确填充模板时遇到问题。

我有一个商店定位器，其中列出了药店，并显示其相关数据(电话、地址、营业时间)+ 3 个按钮(查看商店、查看传单和订单补充)。

WordPress 主题中的函数会针对每个项目获取要相应放置在 html 模板中的数据。

订单补充按钮是通过动态链接生成的，该链接填充了电话号码和商店名称。

我正在努力实现以下目标:

对于没有订单补充的商店(字段 id #no-order，值 No/Empty)，我想隐藏“订单补充”按钮(id #order-refill-locator)，并且仅在重新填充字段值为"is"的商店 - 数据将发送到 HTML 模板，如下所示{{order-refill}}

if ($query->posts) {
    foreach ($query->posts as $result) {
        // echo "<pre>"; print_r(  get_post_meta($result->ID, "wpsl_hours", true) ); die;
        $src = wp_get_attachment_image_src( get_post_thumbnail_id($result->ID), 'thumbnail' );
        if (!empty($src)) {
            $image = $src[0];
        } else {
            $image = get_site_url() . '/store_default.jpg';
        }

        $args = array('orderby' => 'name', 'order' => 'ASC', 'fields' => 'all');
        $terms = wp_get_post_terms( $result->ID, 'wpsl_store_category', $args );

        $term_categories = '';
        foreach ($terms as $term) {
            $term_categories .= $term->slug . ', ';
        }
        $rs_categories = substr(trim($term_categories), 0, -1);

        $hours = get_post_meta($result->ID, "wpsl_hours", true);

        $excerpt = get_the_excerpt($result->ID);

        $store_data[]    =   array(
            'id'           =>  $result->ID,
            'name'         =>  $result->post_title,
            'description'  =>  $result->post_content,
            'lng'          =>  get_post_meta($result->ID, "wpsl_lng", true),
            'lat'          =>  get_post_meta($result->ID, "wpsl_lat", true),
            'address'      =>  get_post_meta($result->ID, "wpsl_address", true),
            'address2'     =>  get_post_meta($result->ID, "wpsl_address2", true),
            'link'         =>  get_post_meta($result->ID, "wpsl_url", true),
            'image'        =>  $image,
            'telephone'    =>  get_post_meta($result->ID, "wpsl_phone", true),
            'fax'          =>  get_post_meta($result->ID, "wpsl_fax", true),
            'email'        =>  get_post_meta($result->ID, "wpsl_email", true),
            'order-refill'      =>  get_post_meta($result->ID, "wpsl_refill", true),
            'city'         =>  get_post_meta($result->ID, "wpsl_city", true),
            'country'      =>  get_post_meta($result->ID, "wpsl_country", true),
            'zipcode'      =>  get_post_meta($result->ID, "wpsl_zip", true),
            'state'        =>  get_post_meta($result->ID, "wpsl_state", true),
            'hours'        =>  day($hours, 'monday'),  
            'hours1'       =>  day($hours, 'tuesday'),  
            'hours2'       =>  day($hours, 'wednesday'),  
            'hours3'       =>  day($hours, 'thursday'),  
            'hours4'       =>  day($hours, 'friday'),  
            'hours5'       =>  day($hours, 'saturday'),
            'hours6'       =>  day($hours, 'sunday'),
            'flyer'        =>  '/weekly-flyer/?store_code=' . get_post_meta($result->ID, "wpsl_address2", true),
            'tag'          =>  $rs_categories,
            'category'     =>  $rs_categories,
            'href'         =>  get_permalink($result->ID),
            'color'        =>  trim('#005392'),
            'fontClass'    =>  trim('fa-map-marker'),
            'lat'          =>  get_post_meta($result->ID, "wpsl_lat", true),
            'lng'          =>  get_post_meta($result->ID, "wpsl_lng", true),
        );
    }
}

我怎样才能做到这一点？我曾尝试将模板设置为 PHP，并添加 IF 语句以可能以这种方式隐藏它，但没有成功。

任何帮助将不胜感激，谢谢!

编辑:下面的模板代码:

 <ul>
            <li data-markerid="{{markerid}}">
        <div class="img-store">
            <div class="loc-icon">
                 <svg width="25" height="22" viewBox="0 0 22 28" xmlns="http://www.w3.org/2000/svg">
                  <g transform="translate(1 1)" stroke="#333" fill="none" fill-rule="evenodd">
                    <path d="M9.985 26.348S0 15.896 0 9.346C0 2.796 4.824 0 10.36 0c5.537 0 9.85 4.868 9.6 10.287-.25 5.42-9.975 16.06-9.975 16.06z"></path>
                    <ellipse cx="9.844" cy="9.643" rx="4.594" ry="4.5"></ellipse>
                  </g>
                </svg> {{distance}} {{length}}
            </div>
            <!--<div class="loc-dist">{{distance}} {{length}}</div>-->
        </div>

        <div class="list-details">
            <div class="list-content">
                <div class="loc-name">
                    <a href="{{href}}" target="_blank">{{name}}</a>

                </div>
                <div class="loc-addr">{{address}}</div> 
                <div class="loc-addr3">{{city}}, {{country}} {{zipcode}}</div>
                <div class="loc-phone"><i class="fa fa-phone"></i> {{telephone}}</div>
                <div class="loc-hours"><span>Mon-Fri:</span> {{hours}}</div>
                <div class="loc-hours"><span>Sat:</span> {{hours6}}</div>
                <div class="loc-hours"><span>Sun:</span> {{hours5}}</div>
                <!--<div> <a href="">{{flyer}}</a></div>-->
                <div class="btn-tiny save-store-locator">

                    <a class="save-as" style="float: none;" onClick="saveStoreHeader(jQuery(this).data('lat'),jQuery(this).data('lng'));" href="javascript:void(0);" data-lat="{{lat}}" data-lng="{{lng}}" class="save-as" role="button">
                        Save as My Store
                    </a>
                </div>
            </div>
        </div>

        <div class="list-btn">
            <div class="btn-tiny location-buttons">
                <a href="{{href}}" role="button">
                    <span class="elementor-button-content-wrapper">
                        <span class="elementor-button-text">VIEW DETAILS</span>
                    </span>
                </a>
            </div> 
            <div class="btn-tiny location-buttons">
                <a href="{{flyer}}" class="elementor-button-link elementor-button elementor-size-md tiny-btn-red tiny-small" role="button">
                    <span class="elementor-button-content-wrapper">
                        <span class="elementor-button-text">VIEW FLYER</span>
                    </span>
                </a>
            </div>
            <div id="order-refill-locator" class="btn-tiny location-buttons" target="_blank">
                <a href="{{order-refill}}" class="elementor-button-link elementor-button elementor-size-md tiny-btn-red" role="button">
                    <span class="elementor-button-content-wrapper">
                        <span class="elementor-button-text">ORDER REFILL</span>
                    </span>
                </a>
            </div>
        </div>
    </li>
</ul>

Answer 1

在您的模板中，只需使用三元运算符来检查 {{ order-refill }} 是否包含任何值。像这样

{{ order-refill ? '': '<div id="order-refill-locator" class="btn-tiny location-buttons" target="_blank">
                <a href="{{order-refill}}" class="elementor-button-link elementor-button elementor-size-md tiny-btn-red" role="button">
                    <span class="elementor-button-content-wrapper">
                        <span class="elementor-button-text">ORDER REFILL</span>
                    </span>
                </a>
            </div>' }}

或者更好的是，使用新的 PHP7 null 合并运算符

{{ order-refill ?? '<div id="order-refill-locator" class="btn-tiny location-buttons" target="_blank">
                <a href="{{order-refill}}" class="elementor-button-link elementor-button elementor-size-md tiny-btn-red" role="button">
                    <span class="elementor-button-content-wrapper">
                        <span class="elementor-button-text">ORDER REFILL</span>
                    </span>
                </a>
            </div>' }}

如果我对空合并运算符的使用有误，请纠正我，但想法是，检查 {{ order-refill }} 是否包含任何值，然后显示 order -refill-locator div。如果没有，则什么都不做。

您自己已经回答了这个问题:)