我有jQuery代码,由PHP制作的<input type="number">
数字微调器,因此它们都具有相同的div。
我想更改jQuery代码,以便在每个<input>
当前$ price(以PHP为单位)*输入的当前值之后写入附近。
价格是PHP中的一个变量,每个<input>
都有所不同。
问题是我不知道如何让jQuery更改最近的div,所以现在它总是得到PHP中的第一个$ price并更改第一个<input>
的div。
PHP代码:
<?php foreach ( $addon['options'] as $key => $option ) :
$price = $option['price'] > 0 ? '' . wc_price( get_product_addon_price_for_display( $option['price'] ) ) . '' : '';
?>
<input type="number" min="0" max="9" />
<?php if ( 1 ) : ?>
<label id="oldprice" style="display:none;"><?php echo wptexturize( $option['label'] ) . ' ' . $price;?></label>
<label><div id="newprice"></div></label>
<?php endif; ?>
和jQuery:
jQuery(
function( $ ) {
var $testProp = $('div.quantity:not(.buttons_added), td.quantity:not(.buttons_added)').find('.AddnQty');
if ($testProp && $testProp.prop('type') != 'date') {
// Quantity buttons
$('div.quantity:not(.buttons_added), td.quantity:not(.buttons_added)').addClass('buttons_added').append('<input type="button" value="+" class="plus" />').prepend('<input type="button" value="-" class="minus" />');
// Target quantity inputs on product pages
$('input.AddnQty:not(.product-quantity input.AddnQty)').each(
function() {
var min = parseFloat($(this).attr('min'));
if (min && min > 0 && parseFloat($(this).val()) < min) {
$(this).val(min);
}
}
);
$(document).on(
'click', '.plus, .minus',
function() {
// Get values
var $AddnQty = $(this).closest('.quantity').find('.AddnQty'),
currentVal = parseFloat($AddnQty.val()),
max = parseFloat($AddnQty.attr('max')),
min = parseFloat($AddnQty.attr('min')),
regex = /[+-]?\d+(\.\d+)?/g,
price = document.getElementById("oldprice").innerHTML,
oldprice = price.match(regex).map(function(v) { return parseFloat(v); }),
step = $AddnQty.attr('step');
// Format values
if (!currentVal || currentVal === '' || currentVal === 'NaN') currentVal = 0;
if (max === '' || max === 'NaN') max = '';
if (min === '' || min === 'NaN') min = 0;
if (step === 'any' || step === '' || step === undefined || parseFloat(step) === 'NaN') step = 1;
// Change the value
if ($(this).is('.plus')) {
if (max && (max == currentVal || currentVal > max)) {
$AddnQty.val(max);
} else {
$AddnQty.val(currentVal + parseFloat(step));
}
} else {
if (min && (min == currentVal || currentVal < min)) {
$AddnQty.val(min);
} else if (currentVal > 0) {
$AddnQty.val(currentVal - parseFloat(step));
}
}
document.getElementById("newprice").innerHTML = oldprice * parseFloat($AddnQty.val());
// Trigger change event
$AddnQty.trigger('change');
}
);
}
});
所以这里我得到的价格是PHP输入的整数。但它始终需要第一个div。
regex = /[+-]?\d+(\.\d+)?/g,
price = document.getElementById("oldprice").innerHTML,
oldprice = price.match(regex).map(function(v) { return parseFloat(v); }),
在这里,我在乘以后改变它。但它只适用于第一次输入。
document.getElementById("newprice").innerHTML = oldprice * parseFloat($AddnQty.val());
我知道应该只有1个身份证。我是这样做的,因为它更容易解释问题
我尝试使用getElementsByClassName来实现它,但有没有办法获得当前正在使用的<input>
的当前数量,所以我们可以使用这个数字来更改正确的newprice类?