jQuery - 如果它只匹配两个特定单词，则显示div

Question

如果我想显示install_option div 只有如果单词“Apple iPad”出现在标题中？

也可以做匹配，如果一个产品叫iPad的（小写）或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

您可以使用indexOf，看是否字符串包含了一些话，如果它会返回索引，如果不是，则返回-1，因此只需检查它是否不返回-1，如下所示：

$(".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

这样的：

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

Answer 3

使用indexOf你可以做到这一点。欲了解更多详情，请参阅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>