如果这些字符串将页面包含在 div 中，我需要显示模式答案

【问题标题】：I need show a modal if these strings contains the page into a div如果这些字符串将页面包含在 div 中，我需要显示模式
【发布时间】：2017-04-13 22:27:14
【问题描述】：

例如，我有 3 个字符串来验证是否包含在页面中，如果此字符串不在此页面中，则模式不会加载到页面上，如果字符串包含在页面加载中，则会打开此模式。

$(document).ready(function() {
    $('.fl-product-ref').load(function(){
      var lightBox = $('.skuReference');
      switch(false) {
        case (lightBox.find('LNC-L4139800')):
        case (lightBox.find('LNC-L6669601')):
        case (lightBox.find('LNC-L6669600')):
            lightBox.removeClass('hidden').addClass('visible');
            break;
        default:
            lightBox.addClass('hidden');
            break; 
      }
    });
}

<span class="fl-product-ref">
  <div class="skuReference">LNC-L4139800</div>
</span>

<div class="skuModal hidden">
  This is the modal!
</div>

【问题讨论】：

标签： javascript jquery simplemodal

【解决方案1】：

<!DOCTYPE html>
<html>
<head>
    <title></title>

    <style type="text/css">
        .hidden{
      visibility :hidden;
    }
    </style>
</head>
<body>

<span class="fl-product-ref">
  <div class="skuReference">LNC-L4139800</div>
  <div class="skuReference">LNC-L4139800</div>
  <div class="skuReference">LNC-L6669601</div>
  <div class="skuReference">LNC-L4139800</div>
</span>

<div class="skuModal hidden">
  This is the modal!
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
   // $('.fl-product-ref').load(function(){
      var arr = $('.skuReference').map(function(index , val){ return $(val).text()});
      //["LNC-L4139800", "LNC-L4139800", "LNC-L6669601", "LNC-L4139800"]

      switch(true) {
        case ($.inArray("LNC-L4139800", arr) !== -1):
        case ($.inArray("LNC-L6669601", arr) !== -1):
        case ($.inArray("LNC-L6669600", arr) !== -1):
            $('.skuModal').removeClass('hidden').addClass('visible');
            break;
        default:
            $('.skuModal').addClass('hidden');
            break; 
      }
    //});
});
</script>
</body>
</html>

【讨论】：

【解决方案2】：

switch 语句使用严格等于 (===) 将其表达式与 case 子句匹配。

switch 语句首先计算其表达式。然后它查找第一个 case 子句，其表达式的计算结果与输入表达式的结果相同（使用严格比较，===）

jQuery 的 find 不返回布尔值，因此在这种情况下，严格的 equals 不起作用。

【讨论】：

这只是问题的一部分...find() 用于查询元素，而不是文本
有条件的不是必须的，你仍然可以使用==

【解决方案3】：

我使用了 jQuery :contains() 选择器。

在这里查看我的 jsFiddle：Check if page contains certain strings of text, if so, do something

$(document).ready(function() {
    if (($('body:contains("LNC-L4139800")').length > 0)
         && ($('body:contains("LNC-L6669601")').length > 0)
         && ($('body:contains("LNC-L6669600")').length > 0)) {
               alert("launch modal");
    }
});

在此处了解有关:contains() 选择器的更多信息：https://api.jquery.com/contains-selector/ 重要提示：文本必须具有匹配的大小写才能被选中。

【讨论】：

【解决方案4】：

$(document).ready(function() {
      var needleProducts= ['LNC-L4139800','LNC-L6669601','LNC-L6669600'];
      var products = [];
      var showModal = true;
      $('.skuReference').each(function(){
            products.push($(this).text());
      });
      for(var i = 0; i < needleProducts.length; i++){
          if(find(products,  needleProducts[i]) === -1){
             showModal = false;
          }
      }

      if(showModal){
            $('.skuModal').removeClass('hidden').addClass('visible');
      } else {
          $('.skuModal').addClass('hidden'); 
      }
});

//crossbrowser method
function find(array, value) {
  if (array.indexOf) { // if method exist
    return array.indexOf(value);
  }
  for (var i = 0; i < array.length; i++) {
    if (array[i] === value) return i;
  }

  return -1;
}

【讨论】：