基於文本輸入值的待發信息

Question

所以我有一個輸入框，只會有一個美元值。根據美元的價值，我想要一個股票交換信息。所以基本上我需要根據輸入值將值範圍與某些內容相關聯，並將模糊內容交換。下面是不起作用的代碼，但有點讓你知道我正在努力完成什麼。任何幫助將不勝感激。

<input type="text" /> 

$(function(){ 

var low = 5 
    mid = 10 
    high = 15 
    val = $('input').val() 

if (val >= low && val < mid){ 
val.blur(function() { 
    val.append('<div>You cheapo!</div>'); 
}); 

} 

if (val >= mid && val < high){ 
val.blur(function() { 
    val.append('<div>You middle class folk!</div>'); 
}); 
} 

if (val >= high){ 
val.blur(function() { 
    val.append('<div>Woah baller!</div>'); 
}); 

} 

}); 

Answer 1

首先，你需要等到blur事件觸發，得到了前輸入值val。其次，你只想對一個模糊事件作出反應，然後執行你的邏輯，所以先設置它。一旦你有了價值，你可以使用你的邏輯來設置另一個div內的text，而不是在運行中創建一個新的。

這是我想你的代碼看起來應該爲了工作：

$(function() { 
    var low = 5, 
     mid = 10, 
     high = 15; 

    function getText(val) { 
     if (val >= low && val < mid) 
      return 'You cheapo!' 
     else if (val >= mid && val < high) 
      return 'You middle class folk!' 
     else if (val >= high) 
      return 'Woah baller!' 
     else 
      return 'Out of range' 
    } 

    $('input').blur(function() { 
     var val = $(this).val(); 
     $('#target').text(getText(val)); 
    }); 
}); 

這裏是它在行動的例子：

DEMO：http://jsfiddle.net/marcuswhybrow/gKBUr/5/

Answer 2

您正試圖將.blur()事件綁定到文本框的值。將它綁定到文本框本身。

喜歡的東西

var obj = $("input"); 


obj.blur(function(){ 
    // do your code 
}); 

你也可以使用.before()或.after()來顯示DIV。

obj.after("<div/>"); 

沒有測試。

$(function() { 
    var low = 5; 
    var mid = 10; 
    var high = 15; 
    var inp = $('input'); 
    var val = inp.val(); 

    if (val >= low && val < mid) { 
     inp.blur(function() { 
      inp.after('<div>You cheapo!</div>'); 
     }); 
    } 

    if (val >= mid && val < high) { 
     inp.blur(function() { 
      inp.after('<div>You middle class folk!</div>'); 
     }); 
    } 

    if (val >= high) { 
     inp.blur(function() { 
      inp.after('<div>Woah baller!</div>'); 
     }); 
    } 
}); 

Answer 3

不是真的知道從哪裏開始幫你，不是告訴你怎麼可以做其他的...

$('input').blur(function() { 
    var low = 5; 
    var mid = 10; 
    var high = 15; 
    var val = $(this).val(); 

    if (val >= low && val < mid){ 
     $('#div-you-want-it-to-appear-in').html('<div>You middle class folk!</div>'); 
    } 

    if (val >= mid && val < high){ 
     $('#div-you-want-it-to-appear-in').html('<div>You middle class folk!</div>'); 
    } 

    if (val >= high){ 
     $('#div-you-want-it-to-appear-in').html('<div>You middle class folk!</div>'); 
    } 

});