如何通过多个滑动条中的按钮增加价值

Question

我创建了两个减少/增加滑块值的按钮。如果我创建一个滑动条，这个代码可以工作，但它不适用于许多滑动条。

显示了Price-A中的值，但Price_B不起作用。我不知道该怎么解决这个问题。请帮帮我。

$('.more,.less').click(function() {
var value = parseInt($('#price').val());
// console.log($(this).hasClass('more'));

switch ($(this).hasClass('more')) {
case true:
value = value === 100 ? value : value + 5;
break;
case false:
value = value === 0 ? value : value - 5;
break;
}
$('#price').val(value).trigger('change');
});
$('#price').change(function(e) {
e.preventDefault();
var current_value = parseInt($('input').val());
$('#result').html("$" + current_value);
})
$('.more1,.less1').click(function() {
var value1 = parseInt($('#price1').val());
// console.log($(this).hasClass('more1'));

switch ($(this).hasClass('more1')) {
case true:
value1 = value1 === 255 ? value1 : value1 + 5;
break;
case false:
value1 = value1 === 0 ? value1 : value1 - 5;
break;
}
$('#price1').val(value1).trigger('change');
});
$('#price1').change(function(e) {
e.preventDefault();
var current_value = parseInt($('input').val());
$('#result1').html(current_value);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h2>Price-A</h2>
<button class="less">less</button>
<input id="price" type="range" min="0" max="100" step="5" value="50" />
<button class="more">more</button>
<p id="result">$50</p>
<h2>Price-B</h2>
<button class="less1">less</button>
<input id="price1" type="range" min="0" max="255" step="5" value="50" />
<button class="more1">more</button>
<p id="result1">$50</p>

Answer 1

只需在$('#price1').change函数中使用e.target.value。

请注意，$('input')是第一个输入，最好使用e.target来确保找到对应的标记。

$('.more,.less').click(function() {
debugger
var value = parseInt($('#price').val());
// console.log($(this).hasClass('more'));

switch ($(this).hasClass('more')) {
case true:
value = value === 100 ? value : value + 5;
break;
case false:
value = value === 0 ? value : value - 5;
break;
}
$('#price').val(value).trigger('change');
});
$('#price').change(function(e) {
e.preventDefault();
var current_value = parseInt($('input').val());
$('#result').html("$" + current_value);
})
$('.more1,.less1').click(function() {
var value1 = parseInt($('#price1').val());
// console.log($(this).hasClass('more1'));

switch ($(this).hasClass('more1')) {
case true:
value1 = value1 === 255 ? value1 : value1 + 5;
break;
case false:
value1 = value1 === 0 ? value1 : value1 - 5;
break;
}
$('#price1').val(value1).trigger('change');
});
$('#price1').change(function(e) {
e.preventDefault();
var current_value = parseInt(e.target.value);
$('#result1').html(current_value);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h2>Price-A</h2>
<button class="less">less</button>
<input id="price" type="range" min="0" max="100" step="5" value="50" />
<button class="more">more</button>
<p id="result">$50</p>
<h2>Price-B</h2>
<button class="less1">less</button>
<input id="price1" type="range" min="0" max="255" step="5" value="50" />
<button class="more1">more</button>
<p id="result1">$50</p>

Answer 2

您的输入选择器错误，这都是

var current_value = parseInt($('input').val());  

将其更改为

var current_value = parseInt($('#price1').val());

$('.more,.less').click(function() {
var value = parseInt($('#price').val());
// console.log($(this).hasClass('more'));

switch ($(this).hasClass('more')) {
case true:
value = value === 100 ? value : value + 5;
break;
case false:
value = value === 0 ? value : value - 5;
break;
}
$('#price').val(value).trigger('change');
});
$('#price').change(function(e) {
e.preventDefault();
var current_value = parseInt($('#price').val());
$('#result').html("$" + current_value);
})
$('.more1,.less1').click(function() {
var value1 = parseInt($('#price1').val());
// console.log(value1);

switch ($(this).hasClass('more1')) {
case true:
value1 = value1 === 255 ? value1 : value1 + 5;
break;
case false:
value1 = value1 === 0 ? value1 : value1 - 5;
break;
}
$('#price1').val(value1).trigger('change');
});
$('#price1').change(function(e) {
e.preventDefault();
var current_value = parseInt($('#price1').val());
$('#result1').html("$"+current_value);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h2>Price-A</h2>
<button class="less">less</button>
<input id="price" type="range" min="0" max="100" step="5" value="50" />
<button class="more">more</button>
<p id="result">$50</p>
<h2>Price-B</h2>
<button class="less1">less</button>
<input id="price1" type="range" min="0" max="255" step="5" value="50" />
<button class="more1">more</button>
<p id="result1">$50</p>

Answer 3

问题是因为var current_value = parseInt($('input').val());代码行只选择DOM中的第一个input。它不会选择与单击的按钮相关的按钮。

要解决此问题并清空代码，请使用常见的class名称按行为而不是id属性对元素进行分组。然后，您可以使用jQuery遍历DOM，使元素相互关联，以便根据需要读取/更新它们。

这种方法的好处是，您的JS代码变得更加简洁，HTML变得更加通用，并且只需复制/粘贴HTML结构，它就可以无限重复。

此外，请注意，switch条件不是必需的，因为input上的min和max属性将自动防止值超出这些界限。

说到这里，试试这个：

$('.more, .less').click(e => {
let $button = $(e.target);
let $price = $button.closest('.slide-container').find('.price');
$price.val((i, v) => parseInt(v, 10) + $price.prop('step') * $button.data('inc')).trigger('change');
});
$('.price').change(e => {
e.preventDefault();
let $price = $(e.target);
let $container = $price.closest('.slide-container');
$container.find('.result').text("$" + $price.val());
})

h2 {
font-size: 1em;
display: inline-block;
}
.result {
display: inline-block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="slide-container">
<h2>Price A</h2>
<button class="less" data-inc="-1">less</button>
<input class="price" type="range" min="0" max="100" step="5" value="50" />
<button class="more" data-inc="1">more</button>
<p class="result">$50</p>
</div>
<div class="slide-container">
<h2>Price B</h2>
<button class="less" data-inc="-1">less</button>
<input class="price" type="range" min="0" max="255" step="5" value="50" />
<button class="more" data-inc="1">more</button>
<p class="result">$50</p>
</div>
<div class="slide-container">
<h2>Price C</h2>
<button class="less" data-inc="-1">less</button>
<input class="price" type="range" min="0" max="1000" step="50" value="650" />
<button class="more" data-inc="1">more</button>
<p class="result">$650</p>
</div>