2017-02-24 40 views
1

現在我有這個腳本,它工作正常,但是當我嘗試選擇一個收音機+檢查複選框我只有基本價格+複選框值我想要基本價格+收音機+複選框。 你能幫我嗎? :)如何獲取數據價格收音機選擇 - JavaScript

if (document.getElementById("getPrice")) { 
 
    var basePrice = parseFloat(document.getElementById("getPrice").value); 
 
    $(".choice").click(function() { 
 
    var newPrice = basePrice; 
 
    newPrice += parseFloat($(this).attr('data-price')); 
 
    newPrice = newPrice.toFixed(2); 
 
    $("#item-price").html(newPrice); 
 
    }); 
 
}
.choice { 
 
    height: 50px; 
 
    width: 50px; 
 
    background: blue 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="input" id="getPrice" value="899"> 
 

 
<div class="choice active" data-toggle="wizard-radio" rel="tooltip" data-price="99" title="" data-original-title="+ 99 PLN"> 
 
<input type="radio" class="calculate" name="option1" value="House" checked="checked"> 
 
</div> 
 

 
<div class="choice active" data-toggle="wizard-radio" rel="tooltip" data-price="25" title="" data-original-title="+ 99 PLN"> 
 
<input type="radio" class="calculate" name="option1" value="House" checked="checked"> 
 
</div> 
 

 
<div class="choice active" data-toggle="wizard-checkbox" rel="tooltip" data-price="122" title="" data-original-title="+ 99 PLN"> 
 
<input type="checkbox" class="calculate" name="option1" value="House" checked="checked"> 
 
</div> 
 
<a id="item-price">899</a>

回答

0

您發佈的代碼是不完整的,我只好由我自己來填補它。 如果您想要使用元素中的自定義屬性,請使用attr='value'模式。

if (document.getElementById("getPrice")) { 
 
    var basePrice = parseFloat(document.getElementById("getPrice").value); 
 
    $(".choice").find('input[type=radio]').click(function() { 
 
    var newPrice = basePrice; 
 
    if ($(".choice").find('input[type=checkbox]').is(':checked')) { 
 
     newPrice = parseFloat($(this).parent().attr('data-price')) + parseInt($(".choice").find('input[type=checkbox]').parent().attr('data-price')) + basePrice; 
 
     newPrice = newPrice.toFixed(2); 
 
     console.log(newPrice); 
 
    } else { 
 
     console.log(basePrice + parseFloat($(this).parent().attr('data-price'))); 
 
    } 
 
    }); 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class='container'> 
 
    <input type="input" id="getPrice" value="899"> 
 

 
    <div class="choice active" data-toggle="wizard-radio" rel="tooltip" data-price="99" title="" data-original-title="+ 99 PLN"> 
 
    <input type="radio" class="calculate" name="option1" value="House" checked="checked"> 
 
    </div> 
 

 
    <div class="choice active" data-toggle="wizard-radio" rel="tooltip" data-price="25" title="" data-original-title="+ 99 PLN"> 
 
    <input type="radio" class="calculate" name="option1" value="House" checked="checked"> 
 
    </div> 
 

 
    <div class="choice active" data-toggle="wizard-checkbox" rel="tooltip" data-price="122" title="" data-original-title="+ 99 PLN"> 
 
    <input type="checkbox" class="calculate" name="option1" value="House" checked="checked"> 
 
    </div> 
 
    <a id="item-price">899</a> 
 
</div>

+0

我沒有看到任何diferents,我貼你的代碼,並且NaN –

+0

也許是因爲我有更多階層的首選選擇? –

+0

@MaciejWojtasik這不是將原始代碼複製並粘貼到代碼中。你必須調整它。你沒有與我們分享你的整個代碼,我無法精確地回答你... –