Question

我的价格随间隔时间而变化。当价格发生变化时，我需要能够更新另一个div的保证金。

价格1：10,000英镑（动态变化）

价格2：12,000英镑

价格3：£8,000

计算：价格2 - 价格1 =价格3

$('.price1').change(function() {
  onTargetProfitChange()
});

function onTargetProfitChange(){
  var originalvalue = $(".price1").val();
}

Answer 1

首先，您需要编写一个函数来计算price3的值，即onTargetChange()，然后在setInterval()

中调用此函数

此外，我已将课程active添加到当前div以获取当前price1值...

同样.val()用于input元素...此处您的值在span内，因此请尝试使用text() ...

Stack Snippet

var currentDiv = $("#a");
var nextDiv, count = 1;
var myInterval = setInterval(function() {
  if (count == 5) {
    return;
  } else {
    count++;
    currentDiv.removeClass("active").hide();
    currentDiv = currentDiv.next();
    currentDiv.addClass("active").show();
    onTargetChange();
  }
}, 3000);


function onTargetChange() {
  var price1Value = $(".active .price1").text();
  //console.log(price1Value);
  var price2Value = $(".price2").text();
  var price3Value = parseInt(price2Value) - parseInt(price1Value);
  $(".price3").text(price3Value);
}

#b,
#c,
#d,
#e {
  display: none
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
  When value from Price 1 changes. Price 3 needs to update.<br /> Calc: Price 2 - Price 1 = Price 3
</p>

<div id="a" class="active">
  <p>
    Price 1: £<span class="price1">12000</span>
  </p>
</div>

<div id="b">
  <p>
    Price 1: £<span class="price1">13000</span>
  </p>
</div>

<div id="c">
  <p>
    Price 1: £<span class="price1">14000</span>
  </p>
</div>

<div id="d">
  <p>
    Price 1: £<span class="price1">15000</span>
  </p>
</div>

<div id="e">
  <p>
    Price 1: £<span class="price1">16000</span>
  </p>
</div>

<hr />

<p>Price 2: £<span class="price2">20000</span></p>

<hr />

<p>Price 3: £<span class="price3">8000</span></p>

Answer 2

更改div内容时，不会触发更改事件。它仅在表单元素更改时触发。更改价格1时，您必须触发自定义事件。

当您的价格1发生变化时，点击$( ".price1" ).trigger( "change" );之类的内容。

然后添加一个像$( ".price1" ).on('change', function() {})这样的事件处理程序来捕获被触发的事件。

另一个想法是创建一个隐藏的表单元素并跟踪其中的更改。您可以在表单字段中更新Price1而不是更新，然后更改该值并处理事件处理程序中的其他更改。

<强>更新

将<input class="price-1-input" type="hidden" value="" />添加到HTML的顶部。

在$('.price-1-input').val(currentDiv.find('.price1').text()).trigger('change');

之后的区间函数中添加currentDiv = currentDiv.next();

使用parseInt或parseFloat对这些数字进行格式化以进行任何计算。

<强>代码：

var currentDiv = $("#a");
var nextDiv, count = 1;
var myInterval = setInterval(function() {
  if (count == 5) {
    clearInterval(myInterval);
  } else {
    count++;
    currentDiv.hide();
    currentDiv = currentDiv.next();
    $('.price-1-input').val(currentDiv.find('.price1').text()).trigger('change');
    currentDiv.show();
  }
}, 3000);
    
 
// When Price 1 changes update new price

// Value of '#priceChange1' -'.price1'
$('.price-1-input').change(function() {
  onTargetProfitChange()
  console.log('changed')
});



function onTargetProfitChange(){
    var originalvalue = $(".price1").val();
}

#b,
#c,
#d,
#e {
  display: none
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
When value from Price 1 changes. Price 3 needs to update.<br />
Calc: Price 2 - Price 1 = Price 3
</p>
<input class="price-1-input" type="hidden" value="" />
<div id="a">
  <p>
  Price 1: £<span class="price1">12,000</span>
  </p>
</div>

<div id="b">
  <p>
  Price 1: £<span class="price1">13,000</span>
  </p>
</div>

<div id="c">
  <p>
  Price 1: £<span class="price1">14,000</span>
  </p>
</div>

<div id="d">
  <p>
  Price 1: £<span class="price1">15,000</span>
  </p>
</div>

<div id="e">
  <p>
  Price 1: £<span class="price1">16,000</span>
  </p>
</div>

<hr />

<p>Price 2: £<span>20,000</span></p>

<hr />

<p>Price 3: £<span id="price3">8,000</span></p>

jQuery更新价格从一个div到另一个onChange

2 个答案: