我怎样才能模式匹配 ID 只确保变量编号匹配而不必硬编码所有的可能性？

Posted 2023-05-09

【中文标题】我怎样才能模式匹配 ID 只确保变量编号匹配而不必硬编码所有的可能性？

【英文标题】：How can I pattern match ID only making sure the variable number matches without having to hardcode all of the possibilities?

【发布时间】：2021-08-19 04:54:09

【问题描述】：

我最近熟悉了 Jquery 选择器......而且它们工作得很好。开头……结尾……

我目前遇到的问题是，我所有的变量名基本上都以相似的模式开头并以相似的模式结束。这个 ID 是从其他地方生成的，所以我希望我能做些什么来有效地使用它。

模式 ID 格式本质上看起来像...

   "#id_newbudgetlineitem_set-0-line_item_october" 
   "#id_newbudgetlineitem_set-0-line_item_november"
   "#id_newbudgetlineitem_set-0-line_item_december"  

我想在 set-* 上进行基本匹配，但前提是它与我数组中的其他 id 相同。这甚至可能不需要从 set-0 到 set-1000 的任何地方进行硬编码吗？不幸的是，每个班级都与名称情况相同。有没有办法说如果给定数组中的集合数字都匹配然后将它们相加？在这种情况下，我不能使用开头或结尾......并且不想硬编码 1000 种可能性。提前感谢您的任何想法或想法。

我正在尝试做类似.....

  function update_total()
  
    var total = 0;
    $('.budget').each(function(index, element) 
     "#id_newbudgetlineitem_set-0-line_item_october" + 
     "#id_newbudgetlineitem_set-0-line_item_november" +
     "#id_newbudgetlineitem_set-0-line_item_december"
        var val = parseFloat($(element).val());
        if( !isNaN( val ))
             total += val;
          
        );
        $("#id_total").val(total);
  

这是一个可行的解决方案........

  function update_total_total_total()
  
    var ret = +$("input[name$='set-0-line_item_january']").val() + +$("input[name$='set-0-line_item_february']").val() + +$("input[name$='set-0-line_item_march']").val() + +$("input[name$='set-0-line_item_april']").val() + +$("input[name$='set-0-line_item_may']").val() + +$("input[name$='set-0-line_item_june']").val() + +$("input[name$='set-0-line_item_july']").val() + +$("input[name$='set-0-line_item_august']").val() + +$("input[name$='set-0-line_item_september']").val() + +$("input[name$='set-0-line_item_october']").val() + +$("input[name$='set-0-line_item_november']").val() + +$("input[name$='set-0-line_item_december']").val();
    $("input[name$='set-0-line_item_total']").val(ret);
  

但我最多可以有 1000 个不同的设置值。有没有其他方法可以做到这一点，而不必再硬编码 999 次？

这更接近了....但总数仍然显示为 0。它正在将所有总数更新为 0...所以这是一个进步，但没有得到实际总数。感谢 Swati 的进步。

  function update_total_total_total() 
    //get length of input line_total for each sets..
    for (var i = 0; i < $("[name$=line_item_total]").length; i++) 
      var total = 0;
      //get all inputs but not line_item _total
      $(`input[name*=id_newbudgetlineitem_set-$i-line_item]:not([name$=line_item_total]):not([name$=line_item_cost_center]):not([name$=line_item_description])`).each(function(index, element) 
         var val = parseFloat($(element).val());
        if( !isNaN( val ))
             total += val;
          
      )
      $(`input[id$=set-$i-line_item_total]`).val(total); //set value..of input
    
  

【问题讨论】：

你可以使用循环：for (let i = 0; i <= 1000; ++i) /* `set-$i-*` */

非常感谢您的回复。我是 Jquery 和 javascript 的新手……你能告诉我如何将它合并到我的 Jquery 或 Javascript 中吗？

我不知道你对这些模式做了什么。我只知道如何生成它们。您可以提供代码的minimal reproducible example。您可以展示前两种可能性的硬编码示例。

我非常粗略地更新了这个例子，我正在尝试做......如果它以......结束......我知道如何格式化......但在这种情况下我对如何获得这些具有相同编号的 ID 感到困惑。

【参考方案1】：

您可以获得名称以line_item_total 结尾的总输入的长度，因此该值将是for-loop 的计数器。

然后，在 for 循环中，您可以使用 $(`input[name*=id_newbudgetlineitem_set-$i-line_item]:not([name$=line_item_total])`) 这将从所有输入中获取值，除了 line_total_item，然后在每次迭代中添加值。

最后，使用$(`input[name$=set-$i-line_item_total]`).val(total); 在line_total_item 文本框内设置总计。

演示代码：

function update_total_total_total() 
  //get length of input line_total for each sets..
  for (var i = 0; i < $("[name$=line_item_total]").length; i++) 
    var total = 0;
    //get all inputs but not line_item _total
    $(`input[name*=id_newbudgetlineitem_set-$i-line_item]:not([name$=line_item_total]):not([name$=line_item_cost_center]):not([name$=line_item_description])`).each(function(i, element) 
      var val = parseFloat($(element).val());
      if (!isNaN(val)) 
        total += val;
      
    )
    $(`input[name$=set-$i-line_item_total]`).val(total); //set value..of input
  

update_total_total_total()

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  SET 0 :
  <input type="text" name="id_newbudgetlineitem_set-0-line_item_october" value="5">
  <input type="text" name="id_newbudgetlineitem_set-0-line_item_november" value="51">
  <input type="text" name="id_newbudgetlineitem_set-0-line_item_december" value="15">
  <br/> Total :
  <input type="text" name="id_newbudgetlineitem_set-0-line_item_total" value="" placeholder="total">
  <input type="text" name="id_newbudgetlineitem_set-0-line_item_cost_center">
  <input type="text" name="id_newbudgetlineitem_set-0-line_item_description">
</div>
<br/>
<div>
  SET 1
  <input type="text" name="id_newbudgetlineitem_set-1-line_item_october" value="5">
  <input type="text" name="id_newbudgetlineitem_set-1-line_item_december" value="534">
  <br/> Total :
  <input type="text" name="id_newbudgetlineitem_set-1-line_item_total" value="" placeholder="total">
  <input type="text" name="id_newbudgetlineitem_set-1-line_item_cost_center">
  <input type="text" name="id_newbudgetlineitem_set-1-line_item_description">
</div>
<br/>
<div>
  SET 2
  <input type="text" name="id_newbudgetlineitem_set-2-line_item_december" value="4">
  <input type="text" name="id_newbudgetlineitem_set-2-line_item_oct" value="5">
  <br/> Total :
  <input type="text" name="id_newbudgetlineitem_set-2-line_item_total" value="" placeholder="total">
  <input type="text" name="id_newbudgetlineitem_set-2-line_item_cost_center">
  <input type="text" name="id_newbudgetlineitem_set-2-line_item_description">
</div>

【讨论】：

非常感谢您的回复。这让我更接近了。总数现在正在更新...它说 0...我似乎无法让它识别我在该领域的输入。我看到你的例子是 type="text" 我的类型是数字会有所不同吗？

不，这不会造成任何问题。但是，检查我用于输入的名称是否相同，即：模式？

我已经更新了我的例子......它更接近但总数仍然是 0。

做console.log( $(`input[name*=id_newbudgetlineitem_set-$i-line_item]:not([name$=line_item_total]).length) 看看它给了你什么。另外，在循环中执行console.log(val)，看看它是否有任何价值。

我添加了额外的输入 ..您将其用作选择器，它工作正常。我认为你的 name 有问题。检查它们是否相同。

【参考方案2】：

这是最终的工作代码。正如斯瓦蒂所说，这是一个不正确的名称参考。

  function update_total_total_total() 
    for (var i = 0; i < $("[name$=line_item_total]").length; i++) 
      var total = 0;
      $(`input[name*=newbudgetlineitem_set-$i-line_item]:not([name$=line_item_total]):not([name$=line_item_cost_center]):not([name$=line_item_description])`).each(function(i, element) 
        var val = parseFloat($(element).val());
        if( !isNaN( val ))
             total += val;
          
      )
      $(`input[name$=set-$i-line_item_total]`).val(total);