Question

所以我有一个输入框，只能输出一个美元值。基于美元价值，我想要一个div来交换信息。所以基本上我需要根据输入值将值范围与某些内容相关联，并在模糊上交换内容。下面的代码不起作用，但有点让你了解我想要完成的任务。任何帮助将不胜感激。

<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的值。其次，您只想对一个模糊事件做出反应然后执行您的逻辑，所以首先进行设置。获得该值后，您可以使用逻辑将text设置在另一个div中，而不是动态创建新的。

这就是我认为您的代码应该如何工作：

$(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>');
    }

});

根据文本输入值附加信息

3 个答案: