Question

我试图使公式动态化，也是输入字段。第一个问题是根据输入的值将（c1 + d2）改为像（1 + 2）这样的值。考虑到tdinput是动态的，所以我可以尽可能多地添加，公式可以随时更改。

<input class="tdinput" type="text" data-key="c1">
<input class="tdinput" type="text" data-key="d2">

<input type="text" data-formula="(c1 + d2)">

<script>
    $('.tdinput').on('change', function() { 
        var key = $(this).attr('data-key');
        $('[data-formula*="+key+"]').each(function() { 
            //now here goes to change the data-formula by inputted values
            //calculate using eval()
        });
    });

</script>

Answer 1

您需要采用更加模块化的方法。并充分利用你正在使用的javascript jquery api。

当变量由data-something-something定义时，您可以通过jQuerySelectedElement.data('something-something')

访问它

现在，eval是邪恶的，但是当你清理你的输入变量（在这种情况下是parseInt）时，你应该从xss输入等相对保存。

所发生的是，所有变量都作为属性插入到对象t中。然后eval将调用并访问t中的所有对象并进行计算。

唯一要求是您将所有变量定义为不仅仅是c2，而是定义为键定义属性中的t.c2。

下面看一下数据属性和eval的播放。

使用eval时总是确保只评估“安全”数据！如果您打算安全用户输入，请不要评估字符串！然后打开你的网站进行XSS攻击。

$('[data-formula]').on('keyup', function() { 
        var $this = $(this);
        var formulaName = $this.data('formula');
        var $output = $('[data-formula-name="'+formulaName+'"]');
        var formula = $output.data('formula-calc');
        
        var t = {};
        var keys = [];
        $select = $('[data-formula="'+formulaName+'"]');
        $select.each(function(index,elem) {
             var $elem = $(elem);
             var key = $elem.data('key');
             t[key] = parseFloat($elem.val());
             keys.push(key);
             if(isNaN(t[key])) {
                t[key]=0;
             }
        });
        for(var c=0;c<keys.length;c++) {
            formula = formula.replace(new RegExp(keys[c],'g'),'t.'+keys[c]);
        }
        var result = 0;
        eval('result = '+formula)
        $output.val(result)
        
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
sum:
<input class="tdinput" type="text" data-formula="sum" data-key="c1">
<input class="tdinput" type="text" data-formula="sum" data-key="d2">
<input type="text" data-formula-name="sum" data-formula-calc="(c1 + d2)" disabled>
<BR/>
xor
<input class="tdinput" type="text" data-formula="pow" data-key="c1">
<input class="tdinput" type="text" data-formula="pow" data-key="d2">
<input type="text" data-formula-name="pow" data-formula-calc="(c1 ^ d2)" disabled>
<BR/>
sub
<input class="tdinput" type="text" data-formula="sub" data-key="c1">
<input class="tdinput" type="text" data-formula="sub" data-key="d2">
<input type="text" data-formula-name="sub" data-formula-calc="(c1 - d2)" disabled>
<BR/>
silly
<input class="tdinput" type="text" data-formula="silly" data-key="c1">
<input class="tdinput" type="text" data-formula="silly" data-key="d2">
<input type="text" data-formula-name="silly" data-formula-calc="(c1 / d2 * 3.14567891546)" disabled>

Answer 2

您可以使用eval()。

逻辑

获取公式并将其保存在字符串
获取所有有效密钥
用公式
使用eval()处理

示例

JSFiddle

$("#btnCalculate").on("click", function() {
   var $f = $("input[data-formula]");
   var formula = $f.data("formula");
   formula.split(/[^a-z0-9]/gi)
      .forEach(function(el) {
         if (el) {
            let v = $("[data-key='" + el + "']").val();
            formula = formula.replace(el, v);
         }
      });

   var result = eval(formula);
   console.log(result)
   $f.val(result)
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<input class="tdinput" type="text" data-key="c1">
<input class="tdinput" type="text" data-key="d2">
<br/>
<input type="text" data-formula="(c1 + d2)">
<button id="btnCalculate">calculate</button>

Javascript用dom对象中的值替换字符串

2 个答案:

逻辑

示例

参考