2017-04-13 39 views
0

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

回答

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

switch語句使用嚴格的equals(===)來匹配它與一個case子句表達。

switch語句首先評估它的表達式。然後查找表達式的值與輸入表達式的結果相同的第一個case子句(使用嚴格比較,===)

jQuery的find不返回布爾值,所以strict equals在這種情況下不起作用。

+0

這僅僅是問題...'find()方法的一部分'用於查詢的元素,而不是文本 – charlietfl

+0

這是隊伍不是必須的,你仍然可以使用''== – Vivick

0

我用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/重要提示:文本必須有匹配的情況下進行選擇。

0
$(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; 
} 
相關問題