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

Question

如果我想仅在标题中出现“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 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;">
    	<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>

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;">
    	<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>