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

Question

例如，我有 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>

Answer 1

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

A switch statement first evaluates its expression. It then looks for the first case clause whose expression evaluates to the same value as the result of the input expression (using strict comparison, ===)

jQuery 的查找不是 return 布尔值，因此严格等于在这种情况下不起作用。

Answer 2

我使用了 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/ 重要说明：要选择的文本必须具有匹配的大小写。

Answer 3

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

Answer 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;
}

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

I need show a modal if these strings contains the page into a div

javascript

jquery

simplemodal