按所选单选按钮指定的值增加数量

时间:2017-01-18 02:02:11

标签: jquery radio-button counting selected

我希望能够按特定金额设置项目的赌注。通过选中单选按钮指定金额。每次单击都应将所选金额添加到该项目的总计中,并将其显示在该项目旁边。我不确定我是否朝着正确的方向前进,但感谢任何帮助!谢谢!

JSFiddle

HTML

<form id="bet-form">
  <input type="radio" name="bet-placed" id="bet-1" value="1" checked>
  <label for="bet-1" class="bet-label">1</label>
  <br />
  <input type="radio" name="bet-placed" id="bet-5" value="5">
  <label for="bet-5" class="bet-label">5</label>
</form>

<section>
  <img class="count-this" src="some-img-1.jpg" />
  <span class="number">0</span>
</section>
<section>
  <img class="count-this" src="some-img-2.jpg" />
  <span class="number">0</span>
</section>
<section>
  <img class="count-this" src="some-img-3.jpg" />
  <span class="number">0</span>
</section>

的jQuery

var clicks = 0;
var savedBet;

$('#bet-form input').on('change', function getBet() {
  savedBet = $('input[name=bet-placed]:checked', '#bet-form').val();
});

getBet();

$(".count-this").click(function() {
  clicks += $(savedBet);
  $(this).next().find(".number").innerHTML = clicks;
});

if (clicks == 0) {
  $(this).find(".number").css('display', 'none');
} else {
  $(this).find(".number").css('display', 'block');
});

1 个答案:

答案 0 :(得分:2)

您可以尝试此fiddle

var textVal = 0;
var savedBet = 1; 

$('#bet-form input').on('change', function getBet() {
  savedBet = parseInt($('input[name=bet-placed]:checked', '#bet-form').val()); 
});


//getBet(); undefined class

$(".count-this").click(function() {

  textVal =  parseInt($(this).siblings('.number').text());
  textVal += savedBet;
  $(this).siblings('.number').text(textVal);

});

if (clicks == 0) {
  $(this).find(".number").css('display', 'none');
} else {
  $(this).find(".number").css('display', 'block');
};

下次确保使用text转换您选择的parseInt()

您需要声明var textVal以获取所选图片的当前值,然后add将其设置为radio-button的值。