Question

我正在使用jquery-simple-slider 以及来自HighCharts的饼图，用于计算类似于此站点的EMI - http://emicalculator.net/。我发现代码有冲突，似乎无法正常工作。如果包含highcharts，则滑块不起作用。请查看小提琴：http://jsfiddle.net/tzhqvxmk/

$(document).ready(function(){
    //when loan amount slider is moved - calculate emi
    $("#la").bind("slider:changed", function (event, data) {            
            $("#la_value").val(data.value.toFixed(0)); 
            calculateEMI();
        }
    );
    //when rate of interest slider is moved - calculate emi
    $("#roi").bind(
        "slider:changed", function (event, data) {              
            $("#roi_value").val(data.value.toFixed(2)); 
            calculateEMI();
        }
    );//when no of months slider is moved - calculate emi
    $("#nm").bind(
        "slider:changed", function (event, data) {              
            $("#nm_value").val(data.value.toFixed(0)); 
            calculateEMI();
        }
    );


    function calculateEMI(){
        var loanAmount = $("#la_value").val();
        var numberOfMonths = $("#nm_value").val();
        var rateOfInterest = $("#roi_value").val();

        var monthlyInterestRatio = (rateOfInterest/100)/12;

        var top = Math.pow((1+monthlyInterestRatio),numberOfMonths);
        var bottom = top -1;
        var sp = top / bottom;
        var emi = ((loanAmount * monthlyInterestRatio) * sp); //emi


        var full = numberOfMonths * emi;
        var interest = full - loanAmount; //interest 

        var total_payment = parseFloat(interest) + parseFloat(loanAmount);


        $("#emi").html(Math.round(emi)); //monthly emi              
        $("#tbl_int").html(Math.round(interest)); //total interest field
        $("#totalPayment").html(Math.round(total_payment)); 


        $('#container').highcharts({
            chart: {
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false
            },
            title: {
                text: 'EMI Calcualtor'
            },
            tooltip: {
                pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: true,
                        format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                        style: {
                            color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                        }
                    }
                }
            },
            series: [{
                type: 'pie',
                name: 'Amount',
                data: [
                    ['Loan Amount',   eval(loanAmount)],
                    ['Interest',       eval(interest)]        
                ]
            }]
        });

    }

});



<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div class="calculatorcontainer">
        <div class="emicalculatorcontainer">
        <div id="loanformcontainer" class="row">
            <div id="emicalculatordashboard" class="col-sm-8">
            <div id="emicalculatorinnerformwrapper">
                <form id="emicalculatorform" class="">
                <div id="emicalculatorinnerform" class="form-horizontal">



                <div class="car_loan_amount">
                    <div class="form-group lamount">
                    <label class="col-md-4 control-label" for="loanamount">
                        <strong>Home Loan Amount</strong>
                    </label>
                    <div class="col-md-6">
                        <div class="input-group">
                        <span class="input-group-addon">₹</span>
                        <input id="la_value" class="form-control" type="text" value="200000" name="la_value"></input>
                        </div>
                    </div>
                    </div>
            <input id="la" type="text" value="" data-slider="true" data-slider-range="1000,100000" data-slider-step="100" data-slider-highlight="true"style="display: none;" ></input>

                </div> 

                <div class="car_loan_amount">
                    <div class="form-group lamount">
                    <label class="col-md-4 control-label" for="loanamount">
                        <strong>Interest Rate</strong>
                    </label>
                    <div class="col-md-6">
                        <div class="input-group">
                        <span class="input-group-addon">%</span>
                        <input id="roi_value" class="form-control" type="text" value="7" name="la_value"></input>
                        </div>
                    </div>
                    </div>
                <input id="roi" type="text" value="" data-slider="true" data-slider-range="1000,100000" data-slider-step="100" data-slider-highlight="true"style="display: none;" ></input>                
                </div> 

                <div class="car_loan_amount">
                    <div class="form-group lamount">
                    <label class="col-md-4 control-label" for="loanamount">
                        <strong>Loan Tenure</strong>
                    </label>
                    <div class="col-md-6">
                        <div class="input-group">
                        <span class="input-group-addon"><i class="fa fa-clock-o"></i></span>
                        <input id="nm_value" class="form-control" type="text" value="4" name="la_value"></input>
                        </div>
                    </div>
                    </div>
            <input id="nm" type="text" value="" data-slider="true" data-slider-range="1000,100000" data-slider-step="100" data-slider-highlight="true"style="display: none;" ></input>

                </div>
                </div>
            </form>
            <div id="emipaymentsummary">

                <div id="emiamount">
                <h4><b>Loan EMI</b></h4>
                <p>₹<span id="emi">50,731</span></p>
                </div>
                <div id="emitotalinterest">
                <h4><b>Total Interest Payable</b></h4>
                <p>₹<span id="tbl_int">2,925</span>
                </p>
                </div>
                <div id="emitotalamount" class="column-last">
                <h4><b>Total Payment (Principal + Interest)</b></h4>
                <p>₹<span id="totalPayment">2,02,925</span></p>
                </div>

            </div> 


<div id="container" class="col-md-5" data-highcharts-chart="16" ></div>
        </div>
    </div>
</div>
</div>
</div>

Answer 1

您粘贴的滑块代码有问题。如果您单独加载滑块资源，则可以使用小提琴：

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script src="http://loopj.com/jquery-simple-slider/js/simple-slider.js"></script>

http://jsfiddle.net/tzhqvxmk/2/

Answer 2

通过添加这行代码

，这对我有用

FB.api(
    "/" + p_id + "/feed",
    "POST",
    {
    "message": "{{ des| replace({"\n":"\\n", "\r":"\\n"}) }}",
    "description": "{{ des| replace({"\n":"\\n", "\r":"\\n"}) }}",
    "access_token": p_accessToken
    },
     function (response) {  
        if (response && !response.error) {
        /* handle the result */
        console.log("posting");
        console.log(JSON.stringify(response));
        }
        else {
          console.log(JSON.stringify(response));
           alert(response.error.error_user_msg);
          }
       }
      );

因为我使用的是旧版本的jquery。

Highcharts和jquery-simple-slider似乎没有合作

2 个答案: