Question

我正在使用滑块更新2个带有值的文本框，滑块位于有限的范围内，因此它不会给出低于/高于最小值/最大值的值。

当您决定手动更新框中的值时，它还会使用正确的值更新另一个框，但是当您输入超出范围的值时，它会将其更新为该框中允许的最大/最小值，但不会更新除非您进入框并编辑/单击输入，否则在另一个框中显示相关值。

我希望当您输入超出允许范围的值时，将其他框更新为min / max。

我知道这很令人困惑，但是例如在CAD框中输入50，它将BTC更新为0.04113，但是如果你在CAD框中放置200，它会将其更改为最大允许值99.99但是BTC框保持在0.16453是允许的0.08 BTC的两倍，并且不会更新为99.99当量值。

有关如何解决此问题的任何想法/指示？ https://jsfiddle.net/4o6ashpn/

（jsfiddle中的js＆amp; css仅适用于滑块）

$args = array(
'post_type'           => 'product',
'ignore_sticky_posts' => 1,
'no_found_rows'       => 1,
'posts_per_page'      => $posts_per_page,
'orderby'             => menu_order,
'order'               => asc,
'post__in'            => $upsells,
'post__not_in'        => array( $product->id ),
'meta_query'          => WC()->query->get_meta_query()
);

Answer 1

您在致电recalc_cad()或recalc_btc()时更新其他字段，这只发生在keyup事件中，而不是在您离开字段并发生change事件时。您应该在bitcoinCheck()和cadCheck()函数中对这些函数进行额外调用。

var btcPrice = 1215.60;

function cad2btc(amount) {
  amount = parseFloat(amount);
  var btc = amount / btcPrice;
  return btc;
}

function btc2cad(amount) {
  amount = parseFloat(amount);
  var cad = amount * btcPrice;
  return cad;
}

function recalc_cad(amount) {
  cad = parseFloat(amount.value);
  var btc = cad2btc(cad);

  document.getElementById('amount_btc').value = btc.toFixed(5);
}

function recalc_btc(amount) {
  var btc = parseFloat(amount.value),
    cad = btc2cad(btc);
  document.getElementById('amount_cad').value = cad.toFixed(2);
}

function bitcoinCheck(input) {
  if (input.value < 0.002) input.value = 0.002;
  if (input.value > 0.08) input.value = 0.08;
  recalc_btc(input);
}

function cadCheck(input) {
  if (input.value < 2) input.value = 2;
  if (input.value >= 100) input.value = 99.99;
  recalc_cad(input);
}

<input class="input-large" id="amount_btc" name="PAYMENT_AMOUNT_BTC" placeholder="You will receive BTC" pattern="^[0-9.]+$" onkeyup="recalc_btc(this);" onchange="bitcoinCheck(this);" required>

<input class="input-large" id="amount_cad" name="PAYMENT_AMOUNT" placeholder="Amount (CAD) - Minimum 1$" pattern="^[0-9.]+$" onkeyup="recalc_cad(this);" onchange="cadCheck(this);" required>

除非手动编辑/提交，否则不会使用if语句更新值

1 个答案: