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

Posted 2023-02-23

【中文标题】jQuery - 如果仅匹配两个特定单词，则显示 div

【英文标题】：jQuery - Display div if it matches only two certain words

【发布时间】：2017-09-08 02:44:23

【问题描述】：

如果我想仅在标题中出现“Apple iPad”字样时显示 install_option div？

如果产品称为 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  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/

【问题讨论】：

上面显示的 jsfiddle 不起作用。这个可以：jsfiddle.net/54eg8cn6

你可以使用.indexOf，比如this

【参考方案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;">
    	<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  src="http://cdn.cultofmac.com/wp-content/uploads/2012/10/lightningconnector.jpg" style="margin-right:20px; max-width:200px; height: auto;">
		</a>
	</div>

</div>

【讨论】：

联想、微软、宏碁等一系列关键词如何触发？

【参考方案2】：

像这样：

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

【参考方案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;">
    	<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  src="http://cdn.cultofmac.com/wp-content/uploads/2012/10/lightningconnector.jpg" style="margin-right:20px; max-width:200px; height: auto;">
		</a>
	</div>

</div>

【讨论】：

联想、微软、宏碁等一系列关键词如何触发？