javascript - 根据结果​​项的类别类型通过 Javascript 隐藏和显示字段

Question

我在搜索结果页面上有一个动态的属性列表，我在每个单独的搜索结果中遇到的问题是，如果它是某种属性类型，即土地，则不需要该搜索结果中的卧室和浴室字段显示，但如果是别墅，字段将显示。

我需要在 JS 中显示和隐藏页面加载的字段，就像我上面的示例一样，在每个单独的搜索结果中，就好像我为 Land 执行一个通用的 JS 函数来隐藏卧室和浴室的 div 类，也可能有一个需要这些字段的页面上的别墅。

如果有人可以提供一些 JS 帮助我解决上述问题，将不胜感激!

这是下面的一些 Html 结果，您会看到有多个属性类型，因此应该显示/隐藏不同的字段

<div class="property-listing">
    <ul>

        <li class="col-md-12">
            <div class="col-md-4">
                <a href="/propertydetails.aspx?SalePropertyID=615237" class="property-featured-image"><div class="overlay" style="line-height:167px"><i class="fa fa-search"></i></div>
                    <img src="http://example.com/ImageProcessor.aspx?watermarkImageFileName=&amp;Text=NEW LISTING&amp;imageURL=487/Sales/615237/615237_7969.jpg" alt="Villa in Javea">
                    <span class="images-count">
                        <i class="fa fa-link"></i>
                        MidasS
                    </span>
                </a>
            </div>

            <div class="col-md-8">
                <div class="property-info">
                    <div class="price"><span>115.000</span><strong>€</strong></div>
                    <div class="title">
                        <a href="/propertydetails.aspx?SalePropertyID=615237" title="Villa in Javea">
                            Villa in Javea
                        </a>
                    </div>
                    <span class="location"><i class="fa fa-map-marker"></i> Alicante, SPAIN</span>
                    <p>A beautiful and rustic style 'home' offering spectacular views over the coast, the mountains and the Mediterranean Sea.</p>
                </div>

                <div class="property-amenities clearfix">
                    <span id="spbeds"><strong>2</strong>Bedrooms</span>
                    <span id="spbaths"><strong>1</strong>Bathrooms</span>
                    <span id="sppool"><strong>Yes</strong>Pool</span>
                </div>
            </div>
        </li>

        <li class="col-md-12">
            <div class="col-md-4">
                <a href="/propertydetails.aspx?SalePropertyID=638700" class="property-featured-image"><div class="overlay" style="line-height:167px"><i class="fa fa-search"></i></div>
                    <img src="http://example.com/ImageProcessor.aspx?watermarkImageFileName=&amp;Text=REDUCED&amp;imageURL=487/Sales/638700/638700_1145.jpg" alt="Apartment in Famagusta">
                    <span class="images-count">
                        <i class="fa fa-link"></i>
                        PRO1011
                    </span>
                </a>
            </div>

            <div class="col-md-8">
                <div class="property-info">
                    <div class="price"><span>155.000</span><strong>€</strong></div>
                    <div class="title">
                        <a href="/propertydetails.aspx?SalePropertyID=638700" title="Apartment in Famagusta">
                            Apartment in Famagusta
                        </a>
                    </div>
                    <span class="location"><i class="fa fa-map-marker"></i> Famagusta, CYPRUS</span>
                    <p>hnglkrehnblarjl;kbkhmtr;mnb;rstlmnstrn</p>
                </div>

                <div class="property-amenities clearfix">
                    <span id="spbeds"><strong>0</strong>Bedrooms</span>
                    <span id="spbaths"><strong>0</strong>Bathrooms</span>
                    <span id="sppool"><strong>No</strong>Pool</span>
                </div>
            </div>
        </li>

        <li class="col-md-12">
            <div class="col-md-4">
                <a href="/propertydetails.aspx?SalePropertyID=636364" class="property-featured-image"><div class="overlay" style="line-height:188px"><i class="fa fa-search"></i></div>
                    <img src="http://example.com/487/Sales/636364/636364_5562.jpg" alt="Country House in Not Specified">
                    <span class="images-count">
                        <i class="fa fa-link"></i>
                        cyc130
                    </span>
                </a>
            </div>

            <div class="col-md-8">
                <div class="property-info">
                    <div class="price"><span>175.000</span><strong>€</strong></div>
                    <div class="title">
                        <a href="/propertydetails.aspx?SalePropertyID=636364" title="Country House in Not Specified">
                            Country House in Not Specified
                        </a>
                    </div>
                    <span class="location"><i class="fa fa-map-marker"></i> Andalucia, SPAIN</span>
                    <p>;.lkijuhygtfrdeswaq</p>
                </div>

                <div class="property-amenities clearfix">
                    <span id="spbeds"><strong>3</strong>Bedrooms</span>
                    <span id="spbaths"><strong>1</strong>Bathrooms</span>
                    <span id="sppool"><strong>Yes</strong>Pool</span>
                </div>
            </div>
        </li>

        <br> <br>
        <div class="pagination">
            <span class="disabled"><i class="fa fa-chevron-left"></i></span>
            <a href="/searchresults.aspx?SearchID=94829-544&amp;Page=1" class="page, active">1</a>
            <a href="/searchresults.aspx?SearchID=94829-544&amp;Page=2" class="page">2</a>
            <a href="/searchresults.aspx?SearchID=94829-544&amp;Page=3" class="page">3</a>
            <a href="/searchresults.aspx?SearchID=94829-544&amp;Page=4" class="page">4</a>
            <a href="/searchresults.aspx?SearchID=94829-544&amp;Page=2" class="next"><i class="fa fa-chevron-right"></i></a>
        </div>
    </ul>
</div>

Answer 1

我将继续构建我自己的 HTML 结构来演示您将使用 jQuery 制作的简单 if/else 语句。

function hideFields() {

$(".result").each( function() {
  if ( $(this).hasClass("land") ) {
    $(this).children(".bedroom").hide();
    $(this).children(".bathroom").hide();
  }
  else if ( $(this).hasClass("villa") ) {
    $(this).children(".land-area").hide();
  }
});

}

hideFields();

span {
display:block;
border:1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>


<div class="result villa"><b>Villa</b><br>
 <span class="bedroom">Bedroom</span>
 <span class="bathroom">Bathroom</span>
 <span class="location">Location</span>
 <span class="land-area">Land-area</span>
</div>

<br>

<div class="result land"><b>Land</b><br>
 <span class="bedroom">Bedroom</span>
 <span class="bathroom">Bathroom</span>
 <span class="location">Location</span>
 <span class="land-area">Land-area</span>
</div>

由于多种原因，您的 HTML 看起来很困惑，您可以使用此方法轻松修复:

1) sppools、spbaths、spbeds 确实应该是类而不是 ID。这是因为 ID 是唯一标识符 - 因此它们不应在每个页面上出现超过一次，而类标识元素的“类型”(类)，可能会出现多次。同一 ID 的多个实例会扰乱您的 CSS 和 JS。

2) 每个结果中都没有明确定义这是什么类型的结果(或者我似乎找不到，至少？)。像“villa”或“house”这样的词确实出现在标题标签中，但必须在这些词中搜索是执行操作的低效方式。相反，让您的代码将内容类型显示为每个 li-item 或初始 div-item 的类。