選択フォームからテキストのdivを検索し、divの表示をnoneに変更するにはどうすればよいですか？

-2

私はドロップダウンセレクタの値に基づいてdivを非表示にしようとしています。選択した値を含まないdivの代わりに、最初のdivのみを変更します。私はどこが間違っているのか分かりません。ここに私のコードです。選択フォームからテキストのdivを検索し、divの表示をnoneに変更するにはどうすればよいですか？

document.getElementById("SearchFilter").onchange = function() { 
 
    var matcher = new RegExp(document.getElementById("SearchFilter").value, "gi"); 
 
    for (var i = 0; i < document.getElementsByClassName("v-product").length; i++) { 
 
    if (matcher.test(document.getElementsByClassName("tipue_search_content_text")[i].innerHTML)) { 
 
     document.getElementById("v-product").style.display = "inline-block"; 
 
    } else { 
 
     document.getElementById("v-product").style.display = "none"; 
 
    } 
 
    } 
 
};

<form> 
 
    <select id="SearchFilter"> 
 
    <option value="">Choose Part Type</option> 
 
    <option value="belt">Belt</option> 
 
    <option value="filter">Filter</option> 
 
    <option value="blade">Blade</option> 
 
    </select> 
 
</form> 
 

 
<div class="v-product-grid" id="tipue_search_content"> 
 
    <div class="v-product" id="v-product"> 
 
    <div class="tipue_search_content_title"> 
 
     <a href="/John-Deere-V-Belt-M110367-p/M110367.htm"> 
 
     <div class="BrandTitle"> 
 
      John Deere 
 
     </div>V-Belt M110367</a> 
 
    </div> 
 
    <div class="tipue_search_content_text"> 
 
     <a href="/John-Deere-V-Belt-M110367-p/M110367.htm"> 
 
     <object class="v-product__img" data="/v/vspfiles/photos/M110367-1.jpg" type="image/png"> 
 
     </object> 
 
     <div class="PriceText"> 
 
      <b>Price: $33.23</b> 
 
     </div> 
 
     </a> 
 
     <a href="/ShoppingCart.asp?ProductCode=M110367"> 
 
     <button class="btn srchbtn AddToCartBtn" type="button">ADD TO CART 
 
      <i aria-hidden="true" class="fa fa-chevron-circle-right"></i> 
 
     </button> 
 
     </a> 
 
    </div> 
 
    </div> 
 
</div> 
 
<div class="v-product" id="v-product"> 
 
    <div class="tipue_search_content_title"> 
 
    <a href="/John-Deere-Inline%20Fuel%20Filter%20AM116304-p/AM116304.htm"> 
 
     <div class="BrandTitle"> 
 
     John Deere 
 
     </div>Inline Fuel Filter AM116304</a> 
 
    </div> 
 
    <div class="tipue_search_content_text"> 
 
    <a href="/John-Deere-Inline-Fuel-Filter-AM116304-p/AM116304.htm"> 
 
     <object class="v-product__img" data="/v/vspfiles/photos/AM116304-1.jpg" type="image/png"> 
 
     </object> 
 
     <div class="PriceText"> 
 
     <b>Price: $4.55</b> 
 
     </div> 
 
    </a> 
 
    <a href="/ShoppingCart.asp?ProductCode=AM116304"> 
 
     <button class="btn srchbtn AddToCartBtn" type="button">ADD TO CART 
 
     <i aria-hidden="true" class="fa fa-chevron-circle-right"></i> 
 
     </button> 
 
    </a> 
 
    </div> 
 
</div> 
 
<div class="v-product" id="v-product"> 
 
    <div class="tipue_search_content_title"> 
 
    <a href="/John-Deere-Blade-M119206-Set-of-3-Blades-p/M119206.htm"> 
 
     <div class="BrandTitle"> 
 
     John Deere 
 
     </div>Blade M119206 - Set of 3 Blades</a> 
 
    </div> 
 
    <div class="tipue_search_content_text"> 
 
    <a href="/John-Deere-Blade-M119206-Set-of-3-Blades-p/M119206.htm"> 
 
     <object class="v-product__img" data="/v/vspfiles/photos/M119206-1.jpg" type="image/png"> 
 
     </object> 
 
     <div class="PriceText"> 
 
     <b>Price: $76.4</b> 
 
     </div> 
 
    </a> 
 
    <a href="/ShoppingCart.asp?ProductCode=&amp;M119206"> 
 
     <button class="btn srchbtn AddToCartBtn" type="button">ADD TO CART 
 
     <i aria-hidden="true" class="fa fa-chevron-circle-right"></i> 
 
     </button> 
 
    </a> 
 
    </div> 
 
</div>

出典

2016-09-12 Anthony Savage

あなたは問題が何であるかを述べ、または大いに役立つだろう、あなたのHTMLのサンプルを、与えられていません。それはおそらく、そのインデックスを使用して、反復内の要素に 'display'プロパティを設定するべきだと言いました：' document.getElementById（ "v-product"）[i] .style.display = ... ' –

申し訳ありません、私は私の更新役職。ありがとう。 –

更新ありがとうございます。あなたはあなたのHTMLを無効なものとして修正する必要があります。ボタンやレベル要素を 'a'タグ内にブロックすることはできません。 –

なぜこれほど複雑な？ ...ただ、これはmySelectedInput

$('#SearchFilter').on('change', function() { 
    allDivs = $('.v-product');  

    $.each(allDivs, function() { 
     if($(this).html() == mySelectedInput) { 
      $(this).hide(); 
     } else { 
      $(this).show(); 
     } 
    }); 
});

出典

2016-09-12 14:13:26 crunchy

そのインデックスを使用して設定するために必要な表示にし、クラス名が選択したコンテンツを持つすべてのDIVを非表示になりますjQueryのを使用しています。

document.getElementById("SearchFilter").onchange = function() { 
 
    var matcher = new RegExp(document.getElementById("SearchFilter").value, "gi"); 
 
    for (var i = 0; i < document.getElementsByClassName("v-product").length; i++) { 
 
    if (matcher.test(document.getElementsByClassName("tipue_search_content_text")[i].innerHTML)) { 
 
     document.getElementsByClassName("v-product")[i].style.display = "inline-block"; 
 
    } else { 
 
     document.getElementsByClassName("v-product")[i].style.display = "none"; 
 
    } 
 
    } 
 
};

<form> 
 
    <select id="SearchFilter"> 
 
    <option value="">Choose Part Type</option> 
 
    <option value="belt">Belt</option> 
 
    <option value="filter">Filter</option> 
 
    <option value="blade">Blade</option> 
 
    </select> 
 
</form> 
 

 
<div class="v-product-grid" id="tipue_search_content"> 
 
    <div class="v-product" id="v-product"> 
 
    <div class="tipue_search_content_title"> 
 
     <a href="/John-Deere-V-Belt-M110367-p/M110367.htm"> 
 
     <div class="BrandTitle"> 
 
      John Deere 
 
     </div>V-Belt M110367</a> 
 
    </div> 
 
    <div class="tipue_search_content_text"> 
 
     <a href="/John-Deere-V-Belt-M110367-p/M110367.htm"> 
 
     <object class="v-product__img" data="/v/vspfiles/photos/M110367-1.jpg" type="image/png"> 
 
     </object> 
 
     <div class="PriceText"> 
 
      <b>Price: $33.23</b> 
 
     </div> 
 
     </a> 
 
     <a href="/ShoppingCart.asp?ProductCode=M110367"> 
 
     <button class="btn srchbtn AddToCartBtn" type="button">ADD TO CART 
 
      <i aria-hidden="true" class="fa fa-chevron-circle-right"></i> 
 
     </button> 
 
     </a> 
 
    </div> 
 
    </div> 
 
</div> 
 
<div class="v-product" id="v-product"> 
 
    <div class="tipue_search_content_title"> 
 
    <a href="/John-Deere-Inline%20Fuel%20Filter%20AM116304-p/AM116304.htm"> 
 
     <div class="BrandTitle"> 
 
     John Deere 
 
     </div>Inline Fuel Filter AM116304</a> 
 
    </div> 
 
    <div class="tipue_search_content_text"> 
 
    <a href="/John-Deere-Inline-Fuel-Filter-AM116304-p/AM116304.htm"> 
 
     <object class="v-product__img" data="/v/vspfiles/photos/AM116304-1.jpg" type="image/png"> 
 
     </object> 
 
     <div class="PriceText"> 
 
     <b>Price: $4.55</b> 
 
     </div> 
 
    </a> 
 
    <a href="/ShoppingCart.asp?ProductCode=AM116304"> 
 
     <button class="btn srchbtn AddToCartBtn" type="button">ADD TO CART 
 
     <i aria-hidden="true" class="fa fa-chevron-circle-right"></i> 
 
     </button> 
 
    </a> 
 
    </div> 
 
</div> 
 
<div class="v-product" id="v-product"> 
 
    <div class="tipue_search_content_title"> 
 
    <a href="/John-Deere-Blade-M119206-Set-of-3-Blades-p/M119206.htm"> 
 
     <div class="BrandTitle"> 
 
     John Deere 
 
     </div>Blade M119206 - Set of 3 Blades</a> 
 
    </div> 
 
    <div class="tipue_search_content_text"> 
 
    <a href="/John-Deere-Blade-M119206-Set-of-3-Blades-p/M119206.htm"> 
 
     <object class="v-product__img" data="/v/vspfiles/photos/M119206-1.jpg" type="image/png"> 
 
     </object> 
 
     <div class="PriceText"> 
 
     <b>Price: $76.4</b> 
 
     </div> 
 
    </a> 
 
    <a href="/ShoppingCart.asp?ProductCode=&amp;M119206"> 
 
     <button class="btn srchbtn AddToCartBtn" type="button">ADD TO CART 
 
     <i aria-hidden="true" class="fa fa-chevron-circle-right"></i> 
 
     </button> 
 
    </a> 
 
    </div> 
 
</div>

出典

2016-09-12 15:44:44

選択フォームからテキストのdivを検索し、divの表示をnoneに変更するにはどうすればよいですか？

答えて

関連する問題