Question

我正在构建一个值查找“计算器”并使用jQuery UI - 我尝试了几种方法，但我使用jQuery并在其中创建函数的经验有些限制 - 我能够轻松获得滑块的值并在页面加载开始时执行值查找，但任何时候我插入任何可以获取值的内容并在加载后再次执行查找功能会使滑块中断 - 任何想法？这是我下面的代码，是一个小提琴（answer）：

<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

所以基本上你的问题是你如何定义事物。你将事物包装在两个不同的现成速记函数中，这些函数由于函数范围而使它们彼此不可用。因此，当您尝试从滑块幻灯片事件中调用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);
}

无法在JQuery UI滑块中触发幻灯片上的功能

1 个答案: