我正在将WooCommerce数量字段设置为文本字段,这样看起来更好,但我不知道如何使用减号按钮。加号按钮工作得很好,但我不知道为什么减号按钮不工作,它什么都不做。
也许有更熟悉JS的人可以看到我的问题?
jQuery(document).ready(function ($) {
// Containing selector
var parentSelector = $(\'.quantity\');
// If it\'s on the page
if( parentSelector.length ) {
// Get the original HTML
var numberInputs = parentSelector.html();
// Minus button
var btnLess = \'<button class="minus">-</button>\';
// Change number to text
var textInputs = numberInputs.replace(\'type="number"\', \'type="text"\');
// Plus button
var btnMore = \'<button class="plus">+</button>\';
// Append it all
parentSelector.append(btnLess + textInputs + btnMore);
// Hide the original
parentSelector.find(\'input[type="number"]\').hide();
// increase or decrease the count
$(\'.plus, .minus\').on(\'click\', function(e) {
e.preventDefault();
var newCounter = $(this).prevAll(\'input.qty[type="text"]\');
var oldCounter = $(this).prevAll(\'input.qty[type="number"]\');
var counterVal = newCounter.val();
if( $(e.target).hasClass(\'plus\') ) {
counterVal++ ;
} else {
counterVal-- ;
}
// Apply to both inputs
newCounter.val(counterVal);
oldCounter.val(counterVal);
});
}
});
最合适的回答,由SO网友:Dave Romsey 整理而成
原始代码正在使用prevAll
但目标输入稍后会出现在DOM中。PrevAll
加号按钮工作正常,因为目标输入在加号按钮之前。
以下修改后的代码已测试并运行:
jQuery(document).ready(function ($) {
// Containing selector
var parentSelector = $(\'.quantity\');
// If it\'s on the page
if( parentSelector.length ) {
// Get the original HTML
var numberInputs = parentSelector.html();
// Minus button
var btnLess = \'<button class="minus">-</button>\';
// Change number to text
var textInputs = numberInputs.replace(\'type="number"\', \'type="text"\');
// Plus button
var btnMore = \'<button class="plus">+</button>\';
// Append it all
parentSelector.append(btnLess + textInputs + btnMore);
// Hide the original
parentSelector.find(\'input[type="number"]\').hide();
// increase or decrease the count
$(\'.plus, .minus\').on(\'click\', function(e) {
e.preventDefault();
if( $(e.target).hasClass(\'plus\') ) {
var newCounter = $(this).prevAll(\'input.qty[type="text"]\');
var oldCounter = $(this).prevAll(\'input.qty[type="number"]\');
var counterVal = newCounter.val();
counterVal++ ;
} else {
var newCounter = $(this).nextAll(\'input.qty[type="text"]\');
var oldCounter = $(this).nextAll(\'input.qty[type="number"]\');
var counterVal = newCounter.val();
counterVal-- ;
}
// Apply to both inputs
newCounter.val(counterVal);
oldCounter.val(counterVal);
});
}
});