循环内元素的动态总和

Question

我的 wp 网站有问题... 我有一个名为“sezione”的帖子类型。 对于我创建的每个新帖子，都会在特定页面中自动添加一行。 每行有三个输入字段：在第一个中我必须写男性的数量，在第二个中输入女性的数量，而第三个是具有自动总和的只读字段。 我正在使用这样的while循环：

<?php
    query_posts( array(
        'post_type' => 'sezione',
        'orderby' => 'meta_value_num',
        'meta_key' => 'n-sez',
        'order' => 'ASC'
    ) );   

    if( have_posts() ) : while( have_posts() ) : the_post();
?>

    <?php global $post; ?>
    <?php
    $nsez = get_post_meta($post->ID, 'n-sez', true);
    ?>

    <div class="row-100perc-bord">
    Sezione <?php echo $nsez; ?>
    <div class="affl-box">

    <input type="text" name="uomini<?php echo $nsez; ?>" id="uomini" class="field-50-u" value="<?php if ( isset ( $aff1t_stored_meta['uomini' . $nsez] ) ) echo $aff1t_stored_meta['uomini' . $nsez][0]; ?>" onblur="recalculateSummf();" />

    <input type="text" name="donne<?php echo $nsez; ?>" id="donne" class="field-50-d" value="<?php if ( isset ( $aff1t_stored_meta['donne' . $nsez] ) ) echo $aff1t_stored_meta['donne' . $nsez][0]; ?>" onblur="recalculateSummf();" />

    <input readonly type="text" name="totmf<?php echo $nsez; ?>" id="totmf" class="field-50-mf" value="<?php if ( isset ( $aff1t_stored_meta['totmf' . $nsez] ) ) echo $aff1t_stored_meta['totmf' . $nsez][0]; ?>" />

循环正常工作。我要做的是让每行中的第三个字段显示其他两个值的总和。 我正在使用这个功能：

function recalculateSummf()
{
    var num1 = parseInt(document.getElementById("uomini").value);
    var num2 = parseInt(document.getElementById("donne").value);
    document.getElementById("totmf").value = num1 + num2;

}

但它只在第一行有效。如何使此脚本在所有行中都有效？ 有人可以帮我解决这个问题吗？ 非常感谢！​

Answer 1

问题

主要问题：您应该只为任何页面上的任何元素提供 ID一次。

如果我理解正确，您的 HTML 将如下所示。

<div class="row-100perc-bord">Sezione X
  <div class="affl-box">
    <input type="text" name="uominiX" id="uomini" class="field-50-u"
           value="" onblur="recalculateSummf();" />
    <input type="text" name="donneX" id="donne" class="field-50-d"
           value="" onblur="recalculateSummf();" />
    <input readonly type="text" name="totmfX" id="totmf" class="field-50-mf"
           value="" />
  </div>
</div>
<!-- ... more of the above, but with Sezione Y, Z, ... -->

现在，所有这些都具有 ID uomini、donne 和 totmf。使用getElementById 查找它们将始终返回第一个。

解决方案 1：不同的 ID

简单修复：将$nsez 添加到 ID 并使用它。如果你想这样做，你必须在onblur 中添加$nsez 作为参数来调用recalculateSummf。

function recalculateSummf(sezione) {
  var m = parseInt(document.getElementById('uomini' + sezione).value),
      f = parseInt(document.getElementById('donne' + sezione).value);
  document.getElementById('totmf' + sezione).value = m + f;
}

for (let sezione of ['X', 'Y', 'Z']) {
  recalculateSummf(sezione);
}

<div class="row-100perc-bord">Sezione X
  <div class="affl-box">
    <input type="text" name="uominiX" class="field-50-u" id="uominiX"
           value="10" onblur="recalculateSummf('X');" />
    <input type="text" name="donneX" class="field-50-d" id="donneX"
           value="42" onblur="recalculateSummf('X');" />
    <input readonly type="text" name="totmfX" class="field-50-mf" id="totmfX" />
  </div>
</div>
<div class="row-100perc-bord">Sezione Y
  <div class="affl-box">
    <input type="text" name="uominiY" class="field-50-u" id="uominiY"
           value="16" onblur="recalculateSummf('Y');" />
    <input type="text" name="donneY" class="field-50-d" id="donneY"
           value="64" onblur="recalculateSummf('Y');" />
    <input readonly type="text" name="totmfY" class="field-50-mf" id="totmfY" />
  </div>
</div>
<div class="row-100perc-bord">Sezione Z
  <div class="affl-box">
    <input type="text" name="uominiZ" class="field-50-u" id="uominiZ"
           value="1" onblur="recalculateSummf('Z');" />
    <input type="text" name="donneZ" class="field-50-d" id="donneZ"
           value="9" onblur="recalculateSummf('Z');" />
    <input readonly type="text" name="totmfZ" class="field-50-mf" id="totmfZ" />
  </div>
</div>

解决方案 2：随时更新所有内容

将更新页面上所有总和的替代方法如下。

遍历所有 .row-100perc-bord 容器并在该容器内修复。

function recalculateSummf() {
  var containers = document.querySelectorAll('.row-100perc-bord');
  for (let container of containers) {
    let m = parseInt(container.querySelector('.field-50-u').value),
        f = parseInt(container.querySelector('.field-50-d').value);
    container.querySelector('.field-50-mf').value = m + f;
  }
}
  
recalculateSummf();

<div class="row-100perc-bord">Sezione X
  <div class="affl-box">
    <input type="text" name="uominiX" class="field-50-u"
           value="10" onblur="recalculateSummf();" />
    <input type="text" name="donneX" class="field-50-d"
           value="42" onblur="recalculateSummf();" />
    <input readonly type="text" name="totmfX" class="field-50-mf" />
  </div>
</div>
<div class="row-100perc-bord">Sezione Y
  <div class="affl-box">
    <input type="text" name="uominiY" class="field-50-u"
           value="16" onblur="recalculateSummf();" />
    <input type="text" name="donneY" class="field-50-d"
           value="64" onblur="recalculateSummf();" />
    <input readonly type="text" name="totmfY" class="field-50-mf" />
  </div>
</div>
<div class="row-100perc-bord">Sezione Z
  <div class="affl-box">
    <input type="text" name="uominiZ" class="field-50-u"
           value="1" onblur="recalculateSummf();" />
    <input type="text" name="donneZ" class="field-50-d"
           value="9" onblur="recalculateSummf();" />
    <input readonly type="text" name="totmfZ" class="field-50-mf" />
  </div>
</div>

解决方案 3：传递上下文

如果您将this 参数添加到您的recalculateSummf() 调用中，您会收到对在您的函数中模糊的输入元素的引用。您可以使用它来仅更新已更改的输入。

function recalculateSummf(input) {
  var container = input.parentNode,
      m = parseInt(container.querySelector('.field-50-u').value),
      f = parseInt(container.querySelector('.field-50-d').value);
  container.querySelector('.field-50-mf').value = m + f;
}
  
var inputs = document.querySelectorAll('.field-50-u');
for (let input of inputs) {
  recalculateSummf(input);
}

<div class="row-100perc-bord">Sezione X
  <div class="affl-box">
    <input type="text" name="uominiX" class="field-50-u"
           value="10" onblur="recalculateSummf(this);" />
    <input type="text" name="donneX" class="field-50-d"
           value="42" onblur="recalculateSummf(this);" />
    <input readonly type="text" name="totmfX" class="field-50-mf" />
  </div>
</div>
<div class="row-100perc-bord">Sezione Y
  <div class="affl-box">
    <input type="text" name="uominiY" class="field-50-u"
           value="16" onblur="recalculateSummf(this);" />
    <input type="text" name="donneY" class="field-50-d"
           value="64" onblur="recalculateSummf(this);" />
    <input readonly type="text" name="totmfY" class="field-50-mf" />
  </div>
</div>
<div class="row-100perc-bord">Sezione Z
  <div class="affl-box">
    <input type="text" name="uominiZ" class="field-50-u"
           value="1" onblur="recalculateSummf(this);" />
    <input type="text" name="donneZ" class="field-50-d"
           value="9" onblur="recalculateSummf(this);" />
    <input readonly type="text" name="totmfZ" class="field-50-mf" />
  </div>
</div>

解决方案 4：派生上下文

当您以编程方式附加事件处理程序时，您的函数将默认接收event 参数，该参数带有事件的目标，即被模糊的输入元素。您可以根据需要使用它，因此您根本不需要在 HTML 中添加 onblur。

function recalculateSummf(event) {
  var input = event.target,
      container = input.parentNode;
  update(container);
}

function update(container) {
  var m = parseInt(container.querySelector('.field-50-u').value),
      f = parseInt(container.querySelector('.field-50-d').value);
  container.querySelector('.field-50-mf').value = m + f;
}

// attach event handlers
var inputs = document.querySelectorAll('.field-50-u, .field-50-d');
for (let input of inputs) {
  input.addEventListener('blur', recalculateSummf);
}

// update values initially
var containers = document.querySelectorAll('.row-100perc-bord');
for (let container of containers) {
  update(container);
}

<div class="row-100perc-bord">Sezione X
  <div class="affl-box">
    <input type="text" name="uominiX" class="field-50-u"
           value="10" />
    <input type="text" name="donneX" class="field-50-d"
           value="42" />
    <input readonly type="text" name="totmfX" class="field-50-mf" />
  </div>
</div>
<div class="row-100perc-bord">Sezione Y
  <div class="affl-box">
    <input type="text" name="uominiY" class="field-50-u"
           value="16" />
    <input type="text" name="donneY" class="field-50-d"
           value="64" />
    <input readonly type="text" name="totmfY" class="field-50-mf" />
  </div>
</div>
<div class="row-100perc-bord">Sezione Z
  <div class="affl-box">
    <input type="text" name="uominiZ" class="field-50-u"
           value="1" />
    <input type="text" name="donneZ" class="field-50-d"
           value="9" />
    <input readonly type="text" name="totmfZ" class="field-50-mf" />
  </div>
</div>