jQuery - Anzeigen div wenn es nur zwei bestimmte Wörter

Question

Wenn ich die install_option div nur anzeigen wollte, wenn die Wörter "Apple iPad" im Titel vorhanden sind?

Könnte auch mit passenden tun, wenn ein Produkt ipad genannt wird (klein geschrieben) oder Ipad

<h1 id="pbtitle">Apple iPad 3</h1> 


<div class="install_option" style="display:none;">    
    <div style="width:35%; box-sizing:border-box; float:left;"> 
     <h3 style="font-weight:bold;">Would you like to view accessories?</h3> 
    </div> 

    <div class="apple_install_option" style="padding-top:20px;"> 
     <a href="https://www.apple.com" target="_blank"> 
       <img alt="Apple.com" src="http://cdn.cultofmac.com/wp-content/uploads/2012/10/lightningconnector.jpg" style="margin-right:20px; max-width:200px; height: auto;"> 
     </a> 
    </div> 

</div> 


$(".install_option").each(function() { 
    var brand = $("h1#pbtitle").text().toLowerCase(); 
    if (brand != "Lenovo") { 
    $('.install_option').css('display', 'block'); 
    } 
}); 

https://jsfiddle.net/ote8w56v/

Answer 1

Sie können indexOf verwenden, um zu sehen, ob ein String ein paar Worte enthält, wenn es gibt den Index zurück, wenn nicht, gibt es -1 zurück, so überprüfen Sie einfach, dass es -1 nicht zurückgibt, so:

$(".install_option").each(function() { 
 
    var brand = $("h1#pbtitle").text().toLowerCase(); 
 
    if (brand.indexOf("ipad") != -1) { 
 
    $('.install_option').css('display', 'block'); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!-- Product names include Apple iPad, Acer Iconia, Lenovo Thinkpad --> 
 

 
<h1 id="pbtitle">Apple Ipad 3</h1> 
 

 

 
<div class="install_option" style="display:none;">    
 
    <div style="width:35%; box-sizing:border-box; float:left;"> 
 
    \t <h3 style="font-weight:bold;">Would you like to view accessories?</h3> 
 
    </div> 
 

 
    <div class="apple_install_option" style="padding-top:20px;"> 
 
\t \t <a href="https://www.apple.com" target="_blank"> 
 
\t \t \t \t <img alt="Apple.com" src="http://cdn.cultofmac.com/wp-content/uploads/2012/10/lightningconnector.jpg" style="margin-right:20px; max-width:200px; height: auto;"> 
 
\t \t </a> 
 
\t </div> 
 

 
</div>

Answer 2

wie folgt aus:

$(".install_option").each(function() { 
    var thisElement=$(this); 
    var brand = thisElement.find("h1").text().toLowerCase(); 
    if (/ipad/.test(brand)) { 
     thisElement.css('display', 'block'); 
    } 
}); 

Answer 3

Mit indexOf Sie dies tun können. Für Details Link

$(".install_option").each(function() { 
 
    var brand = $("h1#pbtitle").text().toLowerCase(); 
 
    if (brand.indexOf("ipad") != -1) { 
 
    $('.install_option').css('display', 'block'); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!-- Product names include Apple iPad, Acer Iconia, Lenovo Thinkpad --> 
 

 
<h1 id="pbtitle">Apple Ipad 3</h1> 
 

 

 
<div class="install_option" style="display:none;">    
 
    <div style="width:35%; box-sizing:border-box; float:left;"> 
 
    \t <h3 style="font-weight:bold;">Would you like to view accessories?</h3> 
 
    </div> 
 

 
    <div class="apple_install_option" style="padding-top:20px;"> 
 
\t \t <a href="https://www.apple.com" target="_blank"> 
 
\t \t \t \t <img alt="Apple.com" src="http://cdn.cultofmac.com/wp-content/uploads/2012/10/lightningconnector.jpg" style="margin-right:20px; max-width:200px; height: auto;"> 
 
\t \t </a> 
 
\t </div> 
 

 
</div>