从变量字符串应用条件

Apply condition from variable string

本文关键字：条件 应用 字符串 变量      更新时间：2023-09-26

我有一个条件选择框:

Select Column
Select Operator 
 <option value="">Choose operator</option>
 <option value="=">Equals</option>
 <option value="!=">Does not equal</option>
 <option value="LIKE%%">Contains</option>
 <option value="NOT LIKE%%">Does not contain</option>
 <option value="<">Less then (&lt;)</option>
 <option value=">">Greater then (&gt;)</option>
 <option value="<=">Equals or less then (&lt;=)</option>
 <option value=">=">Equals or greater (&gt;=)</option>
AND Value

我把所有这些都放在一个数组里，比如:

var filterby = [];
    $.each(panels, function(index, row) {
        var obj = {};
        obj['column'] = $(row).find('.dt_column').val();
        obj['operator'] = $(row).find('.dt_operator').val();
        obj['value'] = $(row).find('.dt_value').val();
        filterby.push(obj);
    });

现在我有filterby数组，并希望将它们实现到数组上。

i am here:

var generatedData=tableData.filter(function(index,data){
    $.each(conditions,function(index,condition){
        if(data[condition.column])
    });
});
  • 条件是什么?if(data[condition.column]) ?
  • ，我正在过滤DataTable
    • 的数据

没有html或任何相关名称，这将是有点通用。我将从你的一组条件语句开始。

<option value="">Choose operator</option>
<option value="=">Equals</option>
<option value="!=">Does not equal</option>
<option value="LIKE%%">Contains</option>
<option value="NOT LIKE%%">Does not contain</option>
<option value="<">Less then (&lt;)</option>
<option value=">">Greater then (&gt;)</option>
<option value="<=">Equals or less then (&lt;=)</option>
<option value=">=">Equals or greater (&gt;=)</option>

你必须将这些转换成函数，这些函数期望被调用时带有左侧和右侧参数。

var conditionalFunctions = {
    "=" : function(left,right){ return left === right },
    "!=" : function(left,right){ return left !== right },
    "LIKE%%" : function(left,right){ return left.indexOf(right) > -1 },
    "NOT LIKE%%" : function(left,right){ return left.indexOf(right) == -1 },
    "<" : function(left,right){ return left < right },
    ">" : function(left,right){ return left > right },
    "<=" : function(left,right){ return left <= right },
    ">=" : function(left,right){ return left >= right }
};

然后根据先前选项中的选定值调用这些，并使用当前行值中的参数。

var conditionalFunctions = {
        "=" : function(left,right){ return left === right },
        "!=" : function(left,right){ return left !== right },
        "LIKE%%" : function(left,right){ return left.indexOf(right) > -1 },
        "NOT LIKE%%" : function(left,right){ return left.indexOf(right) == -1 },
        "<" : function(left,right){ return left < right },
        ">" : function(left,right){ return left > right },
        "<=" : function(left,right){ return left <= right },
        ">=" : function(left,right){ return left >= right }
    };
var oper = document.querySelector("#operator"),
    rows = document.querySelectorAll(".row");
document.querySelector("#compare").onclick = function(){
    var func = conditionalFunctions[oper.value];
    for(var i = 0; i < rows.length; i++){
        var row = rows[i],
            left = row.querySelector(".left").innerText,
            right = row.querySelector(".right").innerText;
        row.querySelector(".op").innerText = oper.value;
        row.querySelector(".result").innerText = func(left,right);
       
    }
};
.row span { margin : 5px; }
.result { color: red; }
<select id="operator">
    <option value="">Choose operator</option>
    <option value="=">Equals</option>
    <option value="!=">Does not equal</option>
    <option value="LIKE%%">Contains</option>
    <option value="NOT LIKE%%">Does not contain</option>
    <option value="<">Less then (&lt;)</option>
    <option value=">">Greater then (&gt;)</option>
    <option value="<=">Equals or less then (&lt;=)</option>
    <option value=">=">Equals or greater (&gt;=)</option>
</select>
<button type="button" id="compare">Compare</button>
<div class="row">
  <span class="left">1</span>
  <span class="op"></span>
  <span class="right">2</span>
  <span class="result"></span>
</div>
<div class="row">
  <span class="left">2</span>
  <span class="op"></span>
  <span class="right">2</span>
  <span class="result"></span>
</div>
<div class="row">
  <span class="left">"hello"</span>
  <span class="op"></span>
  <span class="right">"h"</span>
  <span class="result"></span>
</div>

相关文章：