如果隐藏了子元素，如何隐藏父元素？

Question

如果产品有 0 条评论，则尝试在 Shopify 商店中隐藏评论部分的星徽。希望它在产品收到评论后自动显示。下面是它的代码：

HTML

 <div class="spr-badge-container">
    <span class="stamped-product-reviews-badge stamped-main-badge" data-id="{{ product.id }}" data-product-sku="{{ product.handle }}" data-product-type="{{product.type}}" data-product-title="{{product.title}}"  style="display: inline-block;">{{ product.metafields.stamped.badge }}</span>
 </div>

CSS

.stamped-container[data-count="0"][data-version="2"] { 
display:none !important; 
}

此 css 将评论星号隐藏在“spr-badge-container”中。我想要实现的是隐藏“spr-badge-container”div 如果它里面的跨度是隐藏的。

这是我迄今为止尝试过的方法，但没有结果。

jQuery

if($('.stamped-container[data-count="0"][data-version="2"]').is(":hidden")){
$(".spr-badge-container").hide();
}

----

if($('.stamped-container').is(":hidden")){
$(".spr-badge-container").hide();
}

----

if($('.stamped-container').is(":hidden")){
$(".spr-badge-container").css({display:none});
}

----

if($('.stamped-container[data-count="0"][data-version="2"]').is(":hidden")){
$(".spr-badge-container").css({display:none});
}

None 我试过的方法都没有结果，所以想问问我是否遗漏了什么，或者是否有另一种更简单的方法。

提前致谢， J

编辑 - 这是浏览器呈现的 HTML

HTML for review stars section

<div class="spr-badge-container review-margin-cust">
 <span class="stamped-product-reviews-badge stamped-main-badge" data-id="6208427819182" data-product-sku="PRODUCT" data-product-type="" data-product-title="1/2" diameter="" .140"="" height="" clear="" rubber="" bumper"="" style="display: inline-block;">
 <span class="stamped-badge" data-rating="0.0" data-lang="en" aria-label="Rated 0.0 out of 5 stars">
 <span class="stamped-starrating stamped-badge-starrating" aria-hidden="true">
 <i class="stamped-fa stamped-fa-star-o" aria-hidden="true"></i>
 <i class="stamped-fa stamped-fa-star-o" aria-hidden="true"></i>
 <i class="stamped-fa stamped-fa-star-o" aria-hidden="true"></i>
 <i class="stamped-fa stamped-fa-star-o" aria-hidden="true"></i>
 <i class="stamped-fa stamped-fa-star-o" aria-hidden="true"></i>
 </span><span class="stamped-badge-caption" data-reviews="0" data-rating="0.0" data-label="reviews" aria-label="0 reviews" data-version="2">
 </span>
 </span>
 </span>
 </div>

HTML for main reviews section

<div class="stamped-container" data-count="0" data-widget-style="standard2" data-widget-language=""
    data-widget-sort="recent" data-widget-load-type="pagination" data-widget-show-graph="false"
    data-widget-show-sort="false" data-widget-show-date="true" data-widget-type="standard2"
    data-widget-show-summary-photo="true" data-widget-show-summary-recommend="true" data-widget-show-tab-reviews="true"
    data-widget-show-avatar="true" data-widget-show-location="true" data-widget-show-verified="true"
    data-widget-show-share="true" data-widget-show-votes="true" data-widget-show-qna="true"
    data-widget-show-product-variant="true" data-version="2">
    <div class="stamped-header-title"> Customer Reviews </div>
    <div class="stamped-header">
        <div class="stamped-summary" data-count="0">
            <div style="width:200px;float:left;" class="summary-overview">
                <span class="stamped-summary-caption stamped-summary-caption-1">
                    <span class="stamped-summary-text-1" data-count="0" data-rating="0.0">0.0</span>

                </span>
                <span class="stamped-starrating stamped-summary-starrating" aria-hidden="true"> <i
                        class="stamped-fa stamped-fa-star-o" aria-hidden="true"></i><i
                        class="stamped-fa stamped-fa-star-o" aria-hidden="true"></i><i
                        class="stamped-fa stamped-fa-star-o" aria-hidden="true"></i><i
                        class="stamped-fa stamped-fa-star-o" aria-hidden="true"></i><i
                        class="stamped-fa stamped-fa-star-o" aria-hidden="true"></i> </span>
                <span class="stamped-summary-caption stamped-summary-caption-2">
                    <span class="stamped-summary-text" data-count="0" data-rating="0.0">Based on 0 Reviews</span>
                </span>
            </div>
            <div class="stamped-summary-ratings" data-count="0" aria-hidden="true" style="">
                <div class="summary-rating" data-count="0">
                    <div class="summary-rating-title">5 ★</div>
                    <div class="summary-rating-bar" data-rating="5">
                        <div class="summary-rating-bar-content" style="width:0%;" data-rating="0">0%&nbsp;</div>
                    </div>
                    <div class="summary-rating-count">0</div>
                </div>
                <div class="summary-rating" data-count="0">
                    <div class="summary-rating-title">4 ★</div>
                    <div class="summary-rating-bar" data-rating="4">
                        <div class="summary-rating-bar-content" style="width:0%;" data-rating="0">0%&nbsp;</div>
                    </div>
                    <div class="summary-rating-count">0</div>
                </div>
                <div class="summary-rating" data-count="0">
                    <div class="summary-rating-title">3 ★</div>
                    <div class="summary-rating-bar" data-rating="3">
                        <div class="summary-rating-bar-content" style="width:0%;" data-rating="0">0%&nbsp;</div>
                    </div>
                    <div class="summary-rating-count">0</div>
                </div>
                <div class="summary-rating" data-count="0">
                    <div class="summary-rating-title">2 ★</div>
                    <div class="summary-rating-bar" data-rating="2">
                        <div class="summary-rating-bar-content" style="width:0%;" data-rating="0">0%&nbsp;</div>
                    </div>
                    <div class="summary-rating-count">0</div>
                </div>
                <div class="summary-rating" data-count="0">
                    <div class="summary-rating-title">1 ★</div>
                    <div class="summary-rating-bar" data-rating="1">
                        <div class="summary-rating-bar-content" style="width:0%;" data-rating="0">0%&nbsp;</div>
                    </div>
                    <div class="summary-rating-count">0</div>
                </div>
            </div>
            <div class="stamped-summary-photos stamped-summary-photos-container" aria-hidden="true"
                style="display:none;">
                <div class="stamped-photos-title"> Customer Photos </div>
                <div style="position:relative;overflow: hidden;">
                    <div class="stamped-photos-carousel" data-total="0">
                        <div> </div>
                    </div>
                </div>
                <div class="stamped-photos-carousel-btn-left"> <span class="btn-slide-left" data-direction="left"><i
                            class="fa fa-chevron-left" aria-hidden="true"></i></span> </div>
                <div class="stamped-photos-carousel-btn-right"> <span class="btn-slide-right" data-direction="right"><i
                            class="fa fa-chevron-right" aria-hidden="true"></i></span> </div>
            </div>


            <span class="stamped-summary-actions">
                <span class="stamped-summary-actions-newreview"
                    onclick="StampedFn.toggleForm('review','6208427819182');return false;" style="cursor: pointer;"
                    tabindex="0">Write a Review</span>
                <span class="stamped-summary-actions-newquestion" style="cursor: pointer;display:none;"
                    onclick="StampedFn.toggleForm('question', '6208427819182');return false;" tabindex="0">Ask a
                    Question</span>
            </span>
        </div>
    </div>
    <div class="stamped-content">
        <div class="stamped-tab-container" style="display:none;">
            <ul class="stamped-tabs">
                <li id="tab-reviews" class="active" data-type="reviews" data-count="0" aria-label="Reviews"
                    tabindex="0">Reviews</li>
                <li id="tab-questions" data-type="questions" style="display:none;" data-count="0" aria-label="Questions"
                    tabindex="0" data-new-tab="">Questions</li>
            </ul>
        </div>

        <form method="post" id="new-review-form_6208427819182" class="new-review-form"
            onsubmit="event.preventDefault(); StampedFn.submitForm(this);" style="display:none;">

            <input type="hidden" name="productId" value="6208427819182">
            <div class="stamped-form-title" style=" display:none;">Write a review</div>
            <fieldset class="stamped-form-contact">
                <legend style="display:none;">Author</legend>
                <div class="stamped-form-contact-name">
                    <label class="stamped-form-label" for="review_author_6208427819182">Name</label>
                    <input class="stamped-form-input stamped-form-input-text " id="review_author_6208427819182"
                        type="text" name="author" required="" value="" placeholder="Enter your name"
                        autocomplete="name">
                </div>
                <div class="stamped-form-contact-email">
                    <label class="stamped-form-label" for="review_email_6208427819182">Email</label>
                    <input class="stamped-form-input stamped-form-input-email " id="review_email_6208427819182"
                        type="email" name="email" required="" value="" placeholder="john.smith@example.com"
                        autocomplete="email">
                </div>
                <div class="stamped-form-contact-location">
                    <label class="stamped-form-label" for="review_location_6208427819182">Location</label>
                    <input class="stamped-form-input stamped-form-input-text " id="review_location_6208427819182"
                        type="text" name="location" value="" placeholder="e.g Paris, France"
                        autocomplete="shipping country">
                </div>
            </fieldset>
            <fieldset class="stamped-form-review">
                <legend style="display:none;">Rating</legend>
                <div class="stamped-form-review-rating">
                    <label class="stamped-form-label" for="reviewRating">Rating</label>
                    <input type="text" id="reviewRating" name="reviewRating"
                        style="font-size: 0px; border: none; height: 1px; width: 1px; margin: 0; padding: 0; line-height: 0px; min-height: 0px;"
                        required="">

                    <div class="stamped-form-input stamped-starrating"> <a
                            onclick="StampedFn.setRating(this);return false;" class="stamped-fa stamped-fa-star-o"
                            data-value="1" tabindex="0" aria-label="1 star rating"><span
                                style="display:none;">1</span></a> <a onclick="StampedFn.setRating(this);return false;"
                            class="stamped-fa stamped-fa-star-o" data-value="2" tabindex="0"
                            aria-label="2 stars rating"><span style="display:none;">2</span></a> <a
                            onclick="StampedFn.setRating(this);return false;" class="stamped-fa stamped-fa-star-o"
                            data-value="3" tabindex="0" aria-label="3 stars rating"><span
                                style="display:none;">3</span></a> <a onclick="StampedFn.setRating(this);return false;"
                            class="stamped-fa stamped-fa-star-o" data-value="4" tabindex="0"
                            aria-label="4 stars rating"><span style="display:none;">4</span></a> <a
                            onclick="StampedFn.setRating(this);return false;" class="stamped-fa stamped-fa-star-o"
                            data-value="5" tabindex="0" aria-label="5 stars rating"><span
                                style="display:none;">5</span></a> </div>
                </div>
                <div class="stamped-form-review-title">
                    <label class="stamped-form-label" for="review_title_6208427819182">Title of Review</label>
                    <input class="stamped-form-input stamped-form-input-text" id="review_title_6208427819182"
                        type="text" name="reviewTitle" required="" value="" placeholder="Give your review a title">
                </div>
                <div class="stamped-form-review-body">
                    <label class="stamped-form-label" for="review_body_6208427819182">How was your overall
                        experience?</label>
                    <div class="stamped-form-input">
                        <textarea class="stamped-form-input stamped-form-input-textarea" id="review_body_6208427819182"
                            data-product-id="6208427819182" name="reviewMessage" required="" rows="10"
                            maxlength="5000"></textarea>
                    </div>
                </div>
            </fieldset>
            <fieldset class="stamped-form-custom-questions">
                <legend style="display:none;">Questions</legend>

            </fieldset>
            <fieldset class="stamped-form-actions">
                <legend style="display:none;">Photos</legend>
                <span class="stamped-file-holder">

                </span>
                <span class="stamped-file-uploader" style="display:none;">
                    <label for="stamped-file-uploader-input">
                        <span style="display:none;">Upload</span>
                        <input id="stamped-file-uploader-input" type="file" name="stamped-file-uploader-input"
                            class="stamped-file-uploader-input" multiple="" data-product-id="6208427819182"
                            style="display:none;">

                        <span class="stamped-file-uploader-btn"
                            style="border:1px solid #333;padding: 6px 10px; font-size:13px; border-radius: .3em;">
                            <i class="stamped-fa stamped-fa-camera"></i>
                            <span class="stamped-file-uploader-btn-label2"></span>
                        </span>
                    </label>
                </span>
                <span class="stamped-file-loading hide" style="display:none;">
                    <i class="fa fa-spinner fa-spin" aria-hidden="true"></i>
                </span>

                <input id="stamped-button-submit" type="submit"
                    class="stamped-button stamped-button-primary button button-primary btn btn-primary" value="Submit">
            </fieldset>
        </form>
        <div class="stamped-messages">
            <div class="stamped-thank-you">
                <p>Thank you for submitting a review!</p>
                <p>Your input is very much appreciated. Share it with your friends so they can enjoy it too!</p>
                <div class="stamped-share-links"><a class="facebook"><span><i
                                class="stamped-fa stamped-fa-facebook"></i>Facebook</span></a><a
                        class="twitter"><span><i class="stamped-fa stamped-fa-twitter"></i>Twitter</span></a></div>
            </div>
            <div class="stamped-empty-state" style="display:none;">
                <div>Be the first to review this item</div>
            </div>
        </div>
        <div class="stamped-reviews-filter" id="stamped-reviews-filter" data-show-filters="">
            <span class="stamped-sort-select-wrapper">
                <select id="stamped-sort-select" class="stamped-sort-select" onchange="StampedFn.sortReviews(this);"
                    aria-label="Sort reviews" tabindex="0">
                    <option value="featured" selected="">Sort</option>
                    <option value="recent">Most Recent</option>
                    <option value="highest-rating">Highest Rating</option>
                    <option value="lowest-rating">Lowest Rating</option>
                    <option value="most-votes">Most Helpful</option>
                </select>
            </span>

            <div class="stamped-reviews-filter-label">Filter Reviews:</div>

            <div class="stamped-reviews-search-text" style="display:none;">
                <span class="stamped-reviews-search-icon stamped-fa stamped-fa-search"></span>
                <input id="stamped-reviews-search-input" class="stamped-reviews-search-input" type="text"
                    placeholder="Search Reviews" aria-label="Search reviews input">
                <span class="stamped-reviews-search-button"></span>
                <span class="stamped-reviews-search-clear" tabindex="0" aria-label="Clear search input"
                    style="display:none;">×</span>
            </div>

            <div class="stamped-filters-wrapper">
                <div class="stamped-summary-keywords">
                    <ul class="stamped-summary-keywords-list">

                    </ul>
                </div>

                <div class="stamped-filter-selects">

                    <span class="stamped-sort-select2-wrapper" style="display:none;">
                        <select id="stamped-sort-select2" class="stamped-sort-select"
                            onchange="StampedFn.sortReviews(this);" aria-label="Sort reviews and ratings" tabindex="0"
                            style="display:none;">
                            <option value="featured" selected="">Sort</option>
                            <option value="recent">Most Recent</option>
                            <option value="highest-rating">Highest Rating</option>
                            <option value="lowest-rating">Lowest Rating</option>
                            <option value="most-votes">Most Helpful</option>
                        </select>
                    </span>
                </div>
            </div>

            <div class="stamped-summary-actions-clear" tabindex="0" role="button" aria-label="Clear filters"
                style="cursor: pointer;display:none;">Clear filters</div>

            <div class="stamped-summary-actions-mobile-filter" tabindex="0" role="button" aria-label="More filters"
                style="cursor: pointer;display:none;"><i class="stamped-fa stamped-fa-params"></i> More Filters</div>
        </div>
        <div class="stamped-reviews"></div>
    </div>
</div>

此外，完整 css 隐藏了这些元素

CSS

 #stamped-main-widget .stamped-container[data-count="0"] { display: none !important; }
     .stamped-container[data-count="0"][data-version="2"] { display:none !important; }

Answer 1

好的，根据你的描述你试试这个方法，默认全部隐藏.spr-badge-container 然后在页面加载时检查计数，如果有值则显示或隐藏。

CSS:

.spr-badge-container{ display: none;}

JS:

winodw.onload = ()=>{
 if(jQuery('.stamped-container').data('count') != '0' ){
   $(".spr-badge-container").css('display', 'block');
   // use CSS or show to display the container
   $(".spr-badge-container").show();
 }
}

注意：使用 jQuery 的 JS 代码必须在 jQuery 库加载后加载，否则代码无法运行。

Answer 2

以上回答很有魅力，非常感谢！我对其进行了轻微编辑以获得我需要的完整结果。

CSS

    .spr-badge-container {
        display: none;
    }

    #stamped-main-widget .stamped-container[data-count="0"] {
        display: none !important;
    }

JS

    window.onload = () => {
        if (jQuery('.stamped-container').data('count') != '0') {
            $(".spr-badge-container").css('display', 'block');
        }
    }

再次感谢！我被困了一段时间。

如果隐藏了子元素，如何隐藏父元素？

How can I hide parent element if child element is hidden?

html

css

jquery

liquid

shopify