ラジオ入力

Question

で増加/減少を使用して、私がしたい：

• は値を減らす/増やす必要があり、大入力にアップ/ダウンボタンを押します。
• 価格の下のラジオボタンをクリックすると、価格が選択された値で置き換えられます。潜在的な解決策の

.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; 
 
}

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

Answer 1

たくさん。私はHTMLマークアップをそのまま保ちようとしましたが、マイナーな変更を加えなければなりませんでした。

一部の追加のidセレクタも役立つかもしれませんが、私が言ったように、マークアップをそのまま保つようにしました。

$(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'); 
 
    }); 
 
})

.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; 
 
}

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