使用无线电输入增加/减少

Question

我想：

• 按下大输入中的向上/向下按钮可以增加/减少该值。
• 点击价格下方的单选按钮时，价格应替换为所选值。

＆＃13;

＆＃13;

.priceBlock {
  width: 80%;
  border-radius: 4px;
  background-color: white;
  text-align: center;
  box-shadow: 0px 0 40px 1px grey;
  -moz-box-shadow: 0px 0 40px 1px grey;
  -webkit-box-shadow: 0px 0 40px 1px grey;
}

.priceHeader {
  text-transform: uppercase;
  font-size: 20px;
  background-color: #f7963b;
  padding: 20px;
  color: white;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

.priceContent {
  padding: 0 15px;
}

.priceContent form>p {
  line-height: 3;
  font-size: 12px;
}

.priceContent input[type=radio] {
  display: none;
}

.priceContent label {
  cursor: pointer;
  color: #0a1612;
  font-size: 16px;
  margin-right: 15px;
}

.priceContent label:last-child {
  margin-right: 0;
}

.priceContent label span {
  display: inline-block;
}

.priceContent label .radio {
  background-color: white;
  border: 1px solid #ccced3;
  width: 12px;
  height: 12px;
  margin: 0;
  border-radius: 100%;
  position: relative;
}

.priceContent label .radioer {
  position: absolute;
  display: none;
  width: 8px;
  height: 8px;
  border-radius: 100%;
  background-color: #f7963b;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.labels {
  text-transform: uppercase;
}

.changer {
  position: relative;
}

.changer input {
  text-align: center;
  border: 1px solid #ddd;
  width: 100%;
  outline: none;
  padding: 15px;
  border-radius: 4px;
}

.changer .upDown {
  position: absolute;
  right: 0;
  top: 0;
  border-left: 1px solid #ddd;
}

.upDown>div {
  padding: 5px 15px;
  background-color: #ddd;
  cursor: pointer;
}

.upDown>div:hover {
  background-color: #bbb;
}

.upDown .up {
  border-top-right-radius: 4px;
}

.upDown .down {
  border-bottom-right-radius: 4px;
}

.line {
  border-bottom: 1px solid #ddd;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: space-between;
  -ms-align-items: center;
  align-items: center;
  padding: 20px 0;
}

.priceContent button {
  background-color: #f7963b;
  color: white;
  border: none;
  margin: 20px 0;
  padding: 15px;
  min-width: 130px;
  border-radius: 4px;
}

.resultPrice {
  text-transform: uppercase;
  padding: 20px 0;
}

.resultPrice sup {
  font-size: 22px;
  margin-right: 5px;
}

.resultPrice {
  font-size: 40px;
}

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-md-6">
  <div class="priceBlock">
    <h4 class="priceHeader">36-month plan</h4>
    <div class="priceContent">
      <form action="">
        <h6 class="resultPrice"><sup>usd</sup><span>34.00</span></h6>
        <div class="labels">
          <label for="btc" class="btc">
            <span class="radio">
              <span class="radioer"></span>
            </span>
            <span class="valName">btc</span>
            <span class="cost">0.00648583</span>
          </label>
          <label for="usd" class="usd">
            <span class="radio">
              <span class="radioer"></span>
            </span>
            <span class="valName">usd</span>
            <span class="cost">34.00</span>
          </label>
          <label for="eur" class="eur">
            <span class="radio">
              <span class="radioer"></span>
            </span>
            <span class="valName">eur</span>
            <span class="cost">28.50</span>
            </label>
          <input id="btc" type="radio" name="radAnswer" class="radAnswer">
          <input id="usd" type="radio" name="radAnswer" class="radAnswer">
          <input id="eur" type="radio" name="radAnswer" class="radAnswer">
        </div>
        <p>one time payment</p>
        <div class="changer">
          <input type="text" value="100 GH/s">
          <div class="upDown">
            <div class="up"><i class="fa fa-caret-up" aria-hidden="true"></i></div>
            <div class="down"><i class="fa fa-caret-down" aria-hidden="true"></i></div>
          </div>
        </div>
        <div class="lines">
          <div class="line">
            <p>Maintenance</p>
            <p>$0.00033 per GH/s per day</p>
          </div>
          <div class="line">
            <p>Amount of hosts</p>
            <p class="amountOfHosts">1</p>
          </div>
          <div class="line">
            <p>Delivery Date</p>
            <p>Instantly</p>
          </div>
          <div class="line">
            <p>Duration</p>
            <p>36 months</p>
          </div>
        </div>
        <button type="submit">Buy</button>
      </form>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

许多潜在的解决方案。我试图保持HTML标记不变，但必须做一个小的改动。

一些额外的id选择器可能也会有所帮助，但正如我所说，我试图保持标记不变。

＆＃13;

＆＃13;

$(document).ready(function() {
  var $speed = $('#speed');

  var $currencies = $('input[name="radAnswer"]');
  $currencies.on('click', function(event) {
    var $parent = $(this).parent();
    var currency = $('.valName' ,$parent).text();
    var amount = $('.cost' ,$parent).text();
    
    $('.resultPrice sup').text(currency);
    $('.resultPrice span').text(amount);
  });


  // Increase amount
  $('.up').on('click', function() {
    $speed.val(Number.parseInt($speed.val()) + 10 + ' GH/s');
  });

  // Decrease amount
  $('.down').on('click', function() {
    $speed.val(Number.parseInt($speed.val()) - 10 + ' GH/s');
  });
})

＆＃13;

.priceBlock {
  width: 80%;
  border-radius: 4px;
  background-color: white;
  text-align: center;
  box-shadow: 0px 0 40px 1px grey;
  -moz-box-shadow: 0px 0 40px 1px grey;
  -webkit-box-shadow: 0px 0 40px 1px grey;
}

.priceHeader {
  text-transform: uppercase;
  font-size: 20px;
  background-color: #f7963b;
  padding: 20px;
  color: white;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

.priceContent {
  padding: 0 15px;
}

.priceContent form>p {
  line-height: 3;
  font-size: 12px;
}

.priceContent input[type=radio] {
  display: none;
}

.priceContent label {
  cursor: pointer;
  color: #0a1612;
  font-size: 16px;
  margin-right: 15px;
}

.priceContent label:last-child {
  margin-right: 0;
}

.priceContent label span {
  display: inline-block;
}

.priceContent label .radio {
  background-color: white;
  border: 1px solid #ccced3;
  width: 12px;
  height: 12px;
  margin: 0;
  border-radius: 100%;
  position: relative;
}

.priceContent label .radioer {
  position: absolute;
  display: none;
  width: 8px;
  height: 8px;
  border-radius: 100%;
  background-color: #f7963b;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.labels {
  text-transform: uppercase;
}

.changer {
  position: relative;
}

.changer input {
  text-align: center;
  border: 1px solid #ddd;
  width: 100%;
  outline: none;
  padding: 15px;
  border-radius: 4px;
}

.changer .upDown {
  position: absolute;
  right: 0;
  top: 0;
  border-left: 1px solid #ddd;
}

.upDown>div {
  padding: 5px 15px;
  background-color: #ddd;
  cursor: pointer;
}

.upDown>div:hover {
  background-color: #bbb;
}

.upDown .up {
  border-top-right-radius: 4px;
}

.upDown .down {
  border-bottom-right-radius: 4px;
}

.line {
  border-bottom: 1px solid #ddd;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: space-between;
  -ms-align-items: center;
  align-items: center;
  padding: 20px 0;
}

.priceContent button {
  background-color: #f7963b;
  color: white;
  border: none;
  margin: 20px 0;
  padding: 15px;
  min-width: 130px;
  border-radius: 4px;
}

.resultPrice {
  text-transform: uppercase;
  padding: 20px 0;
}

.resultPrice sup {
  font-size: 22px;
  margin-right: 5px;
}

.resultPrice {
  font-size: 40px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-md-6">
  <div class="priceBlock">
    <h4 class="priceHeader">36-month plan</h4>
    <div class="priceContent">
      <form action="">
        <h6 class="resultPrice"><sup>usd</sup><span>34.00</span></h6>
        <div class="labels">
          <label for="btc" class="btc">
            <span class="radio">
              <span class="radioer"></span>
            </span>
            <span class="valName">btc</span>
            <span class="cost">0.00648583</span>
            <input id="btc" type="radio" name="radAnswer" class="radAnswer">
          </label>
          <label for="usd" class="usd">
            <span class="radio">
              <span class="radioer"></span>
            </span>
            <span class="valName">usd</span>
            <span class="cost">34.00</span>
            <input id="usd" type="radio" name="radAnswer" class="radAnswer">
          </label>
          <label for="eur" class="eur">
            <span class="radio">
              <span class="radioer"></span>
            </span>
            <span class="valName">eur</span>
            <span class="cost">28.50</span>
            <input id="eur" type="radio" name="radAnswer" class="radAnswer">
          </label> 
        </div>
        <p>one time payment</p>
        <div class="changer">
          <input type="text" id="speed" value="100 GH/s">
          <div class="upDown">
            <div class="up"><i class="fa fa-caret-up" aria-hidden="true"></i></div>
            <div class="down"><i class="fa fa-caret-down" aria-hidden="true"></i></div>
          </div>
        </div>
        <div class="lines">
          <div class="line">
            <p>Maintenance</p>
            <p>$0.00033 per GH/s per day</p>
          </div>
          <div class="line">
            <p>Amount of hosts</p>
            <p class="amountOfHosts">1</p>
          </div>
          <div class="line">
            <p>Delivery Date</p>
            <p>Instantly</p>
          </div>
          <div class="line">
            <p>Duration</p>
            <p>36 months</p>
          </div>
        </div>
        <button type="submit">Buy</button>
      </form>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;