Question

如果我想显示install_option div ，如果单词＆＃34; Apple iPad＆＃34;是否出现在标题中？

如果产品名为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}}，如下：

＆＃13;

-1

＆＃13;

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

＆＃13;

Answer 2

像这样：

<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 3

使用indexOf您可以执行此操作。有关详细信息，请参阅Link

＆＃13;

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

＆＃13;

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

＆＃13;

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

3 个答案: