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语句使用strict equals（===）将其表达式与case子句匹配。

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

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

Answer 2

<!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 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/重要说明：文字必须具有匹配的案例才能被选中。

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的页面，我需要显示一个模态

4 个答案: