結果アイテムにあるカテゴリの種類に基づいてJavascriptでフィールドを非表示にして表示

Question

私は検索結果ページにプロパティの動的リストを持っていますが、それぞれの検索結果に問題があります。プロパティタイプie土地それは検索結果の中に寝室と浴室のフィールドが必要ではありませんが、ヴィラの場合はフィールドが表示されます。

上記の例のようにJSのページロード時にフィールドを表示したり非表示にしたりする必要があります。私は、LandやLandroomの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ステートメントを実行する方法を示します。

1）sppoolsは、spbathsは、spbedsが実際のクラスではなく、IDを次のようになります。

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は、簡単にこの方法を使用するために修正することができ、複数の理由で混乱しそうです。これは、IDが一意の識別子であるため、各ページに複数回表示されるのではなく、クラスが複数回表示される可能性のあるアイテムの「タイプ」（クラス）を識別する必要があります。同じIDの複数のインスタンスがCSSとJSに混乱します。

2）どのようなタイプの結果が各結果内に明確に定義されていないか（少なくとも見つけられないようですか？） 「ヴィラ」や「ハウス」のような言葉が実際にタイトルタグに表示されますが、その中で検索する必要がありますが、アクションを効率的に実行できません。 代わりに、各li項目または最初のdiv項目のクラスとしてコンテンツタイプを示すコードを作成してください。