無法在JQuery UI滑塊中觸發幻燈片上的功能

Question

我正在構建一個值查找“計算器”並使用jQuery UI-我嘗試了幾種方法，但是我在jQuery和創建函數中的經驗受到一定限制-我能夠輕松獲取滑塊的值並執行在頁面加載開始時進行值查找，但是任何時候我插入將獲取值的任何內容，並在加載后再次執行查找功能會使滑塊中斷-有什么想法嗎？ 這是我下面的代碼，還有一個玩弄的小提琴（ https://jsfiddle.net/8hhyjdbm/ ）：

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
    $(function() {
    $( "#slider-range-max" ).slider({
      range: "max",
      min: 20000,
      max: 300000,
      value: 20000,
      step:5000,
      slide: function( event, ui ) {
        $( "#amount" ).val( ui.value );
        $( "#financed" ).html( document.getElementById('amount').value);
        getme();
      }
    });
    $( "#amount" ).val( $( "#slider-range-max" ).slider( "value" ) );
  });


$(function(){
var refival = function(Insured, GSR, REFI, Builder, Home_Owner, Const_Loan, Subdivider, Stand_Alone, Simul_Lender, Combo) {
    this.Insured = Insured;
    this.GSR = GSR;
    this.REFI = REFI;
    this.Builder = Builder;
    this.Home_Owner = Home_Owner;
    this.Const_Loan = Const_Loan;
    this.Subdivider = Subdivider;
    this.Stand_Alone = Stand_Alone;
    this.Simul_Lender = Simul_Lender;
    this.Combo = Combo;
};


var refivals = [
new refival("20000","300","200","220","220","220","220","405","255","243"),
new refival("25000","322","200","220","220","220","220","435","263","250"),
new refival("30000","344","200","220","220","220","220","465","271","258"),
    ];


var utils = {};
utils.inArray = function(searchFor, property) {
    var retVal = -1;
    var self = this;
    for(var index=0; index < self.length; index++){
        var item = self[index];
        if (item.hasOwnProperty(property)) {
            if (item[property].toLowerCase() === searchFor.toLowerCase()) {
                retVal = index;
                return retVal;
            }
        }
    };
    return retVal;
};

Array.prototype.inArray = utils.inArray;

var i = refivals.inArray(document.getElementById('amount').value, "Insured");
$('#GSR').text(refivals[i].GSR);
$('#REFI').text(refivals[i].REFI);
$('#Builder').text(refivals[i].Builder);
$('#Const_Loan').text(refivals[i].Const_Loan);
$('#Subdivider').text(refivals[i].Subdivider);
$('#Stand_Alone').text(refivals[i].Builder);
$('#Simul_Lender').text(refivals[i].Const_Loan);
$('#Combo').text(refivals[i].Subdivider);

function getme() {
    var i = refivals.inArray(document.getElementById('amount').value, "Insured");
    $('#GSR').text(refivals[i].GSR);
    $('#REFI').text(refivals[i].REFI);
    $('#Builder').text(refivals[i].Builder);
    $('#Const_Loan').text(refivals[i].Const_Loan);
    $('#Subdivider').text(refivals[i].Subdivider);
    $('#Stand_Alone').text(refivals[i].Builder);
    $('#Simul_Lender').text(refivals[i].Const_Loan);
    $('#Combo').text(refivals[i].Subdivider);
}

});
</script>
<p>
<label for="amount">Insured Amount:</label>
<input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">
<div id="slider-range-max"></div>
<hr>
<div>GSR:&nbsp;&nbsp;&nbsp;<span id="GSR"></span>
    <br>REFI:&nbsp;&nbsp;&nbsp;<span id="REFI"></span>
    <br>Builder:&nbsp;&nbsp;&nbsp;<span id="Builder"></span>
    <br>Const_Loan:&nbsp;&nbsp;&nbsp;<span id="Const_Loan"></span>
    <br>Subdivider:&nbsp;&nbsp;&nbsp;<span id="Subdivider"></span>
    <br>Stand_Alone:&nbsp;&nbsp;&nbsp;<span id="Stand_Alone"></span>
    <br>Simul_Lender:&nbsp;&nbsp;&nbsp;<span id="Simul_Lender"></span>
    <br>Combo:&nbsp;&nbsp;&nbsp;<span id="Combo"></span>
    <br>
</div>

Answer 1

因此，基本上，您的問題是如何定義事物。 您將事物包裝在兩個不同的現成的速記函數中，由於功能范圍，它們使彼此無法使用。 因此，當您嘗試從滑塊slide事件調用getme ，找不到getme 。 讓我知道這是否如您所願。 我還必須在getme添加一個if語句來處理未定義的值。 我認為以后您將獲得更多的revivals因為一旦您超過30000，它就會停止更改值。還必須更改一些用於設置值的行，因為我認為您使用的屬性不正確。

小提琴： http : //jsfiddle.net/AtheistP3ace/8hhyjdbm/5/

$(function () {
    $("#slider-range-max").slider({
        range: "max",
        min: 20000,
        max: 300000,
        value: 20000,
        step: 5000,
        slide: function (event, ui) {
            $("#amount").val(ui.value);
            getme();
        }
    });
    $("#amount").val($("#slider-range-max").slider("value"));

    var i = refivals.inArray(document.getElementById('amount').value, "Insured");
    $('#GSR').text(refivals[i].GSR);
    $('#REFI').text(refivals[i].REFI);
    $('#Builder').text(refivals[i].Builder);
    $('#Const_Loan').text(refivals[i].Const_Loan);
    $('#Subdivider').text(refivals[i].Subdivider);
    $('#Stand_Alone').text(refivals[i].Stand_Alone);
    $('#Simul_Lender').text(refivals[i].Simul_Lender);
    $('#Combo').text(refivals[i].Combo);
});

var refival = function (Insured, GSR, REFI, Builder, Home_Owner, Const_Loan, Subdivider, Stand_Alone, Simul_Lender, Combo) {
    this.Insured = Insured;
    this.GSR = GSR;
    this.REFI = REFI;
    this.Builder = Builder;
    this.Home_Owner = Home_Owner;
    this.Const_Loan = Const_Loan;
    this.Subdivider = Subdivider;
    this.Stand_Alone = Stand_Alone;
    this.Simul_Lender = Simul_Lender;
    this.Combo = Combo;
};


var refivals = [
new refival("20000", "300", "200", "220", "220", "220", "220", "405", "255", "243"),
new refival("25000", "322", "200", "220", "220", "220", "220", "435", "263", "250"),
new refival("30000", "344", "200", "220", "220", "220", "220", "465", "271", "258"), ];


var utils = {};
utils.inArray = function (searchFor, property) {
    var retVal = -1;
    var self = this;
    for (var index = 0; index < self.length; index++) {
        var item = self[index];
        if (item.hasOwnProperty(property)) {
            if (item[property].toLowerCase() == searchFor.toLowerCase()) {
                retVal = index;
                return retVal;
            }
        }
    };
    return retVal;
};

Array.prototype.inArray = utils.inArray;

function getme() {
    var i = refivals.inArray(document.getElementById('amount').value, "Insured");
    if (typeof i == 'undefined' || !refivals[i]) {
        return;
    }
    $('#GSR').text(refivals[i].GSR);
    $('#REFI').text(refivals[i].REFI);
    $('#Builder').text(refivals[i].Builder);
    $('#Const_Loan').text(refivals[i].Const_Loan);
    $('#Subdivider').text(refivals[i].Subdivider);
    $('#Stand_Alone').text(refivals[i].Stand_Alone);
    $('#Simul_Lender').text(refivals[i].Simul_Lender);
    $('#Combo').text(refivals[i].Combo);
}