文章/答案/技术大牛

发布

社区首页 >问答首页 >如何使用多个滑动条中的按钮添加值

问如何使用多个滑动条中的按钮添加值
EN

Stack Overflow用户

提问于 2021-07-20 16:13:43

回答 3查看 39关注 0票数 0

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

显示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>

javascript

html

jquery

回答 3

Stack Overflow用户

发布于 2021-07-20 16:27:05

你的输入选择器错了，仅此而已

 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>

票数 0

Stack Overflow用户

发布于 2021-07-20 16:27:15

只需在$('#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>

票数 0

Stack Overflow用户

发布于 2021-07-20 16:29:51

这个问题是因为您的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>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/68451618

复制

相似问题

问如何使用多个滑动条中的按钮添加值
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用多个滑动条中的按钮添加值EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用多个滑动条中的按钮添加值
EN