Question

我希望每次从<input>更改后得到的值都会显示不同的文字。

$(function($) {

            $(".knob").knob({
                change : function (value) {
                    console.log("change : " + value);
                },
                release : function (value) {
                    console.log(this.$.attr('value'));
                    console.log("release : " + value);
                    var x = value;
                    if( 1 <= x <= 20){
                        document.getElementById("PARAGRAPH").innerHTML = "From 1 to 20";}
                    if ( 21 <= x <= 41){
                        document.getElementById("PARAGRAPH").innerHTML = "From 21 to 41";}
                    if ( 41 <= x <= 61){
                        document.getElementById("PARAGRAPH").innerHTML = "From 41 to 61";}
                    if ( 61 <= x <= 81){
                        document.getElementById("PARAGRAPH").innerHTML = "From 61 to 81";}
                    if ( 81 <= x <= 100){
                        document.getElementById("PARAGRAPH").innerHTML = "From 81 to 100";}
                },
                cancel : function () {
                    console.log("cancel : ", this);
                },
                format : function (value) {
                    return value + '%';
                },})}

在我的index.html中，我显然有<p id="PARAGRAPH"></p>，每当我的值发生变化时，它就会发生变化。问题是，即使我的值为35，唯一出现的是字符串"From 81 to 100"。

Answer 1

您需要使用&&来检查值是否在给定的时间间隔内

left <= val && val <= right

否则你将永远变为现实，因为你现在所拥有的相当于

(left <= val) <= right;
//boolean converted to a number is always <= right

例如1 <= 2; //true和true <= 10; //true

这似乎对我有用http://jsfiddle.net/q2E9s/

$('.knob').knob({
    release: function(val) {
        var mark = $.grep([0, 20, 40, 60, 80], function(mark){
            return mark + 1 <= val && val <= mark + 20;
        })[0]; //find left mark
        $('#PARAGRAPH').html('From ' + (mark + 1) + ' to ' + (mark + 20) );
    }
});

Answer 2

如果输入是整数（或浮点数），则应使用keyup而不是更改并测试。您还需要使用&&。这是一个小例子：http://jsfiddle.net/6r95X/

$('#myIn').on( "keyup", function(){
    x = $('#myIn').val();
    // test if x is an integer
    if (x == parseInt(x)){
        if (1 <= x && x <= 20) {
            $("#res").html("From 1 to 20");
        } else if (21 <= x && x <= 41) {
            $("#res").html("From 21 to 41");
        } else if (41 <= x && x <= 61) {
            $("#res").html("From 41 to 61");
        } else if (61 <= x && x <= 81) {
            $("#res").html("From 61 to 81");
        } else if (81 <= x && x <= 100) {
            $("#res").html("From 81 to 100");
        }else{
            $("#res").html("More than 100");
        }
    }else{
        $("#res").html("Error: not an integer");
    }
});

Answer 3

试用此代码

$(function($) {

        $(".knob").knob({
            change : function (value) {
                console.log("change : " + value);
            },
            release : function (value) {
                console.log(this.$.attr('value'));
                console.log("release : " + value);
                var x = value;
                if( 1 <= x <= 20){
                    document.getElementById("PARAGRAPH").innerHTML = "From 1 to 20";}
                else if ( 21 <= x <= 41){
                    document.getElementById("PARAGRAPH").innerHTML = "From 21 to 41";}
                else if ( 41 <= x <= 61){
                    document.getElementById("PARAGRAPH").innerHTML = "From 41 to 61";}
                else if ( 61 <= x <= 81){
                    document.getElementById("PARAGRAPH").innerHTML = "From 61 to 81";}
                else if ( 81 <= x <= 100){
                    document.getElementById("PARAGRAPH").innerHTML = "From 81 to 100";}
            },
            cancel : function () {
                console.log("cancel : ", this);
            },
            format : function (value) {
                return value + '%';
            },})}

Answer 4

你的if语句多次为真，所以最后一个仍然存在！此外，您的条件在逻辑上是错误的。

使用&&进行多重比较！

将其更改为其他，如果阻止：

if (x >= 1 && x <= 20) {
    document.getElementById("PARAGRAPH").innerHTML = "From 1 to 20";
} else if (x >= 21 && x <= 40) {
    document.getElementById("PARAGRAPH").innerHTML = "From 21 to 41";
} else if (x >= 41 && x <= 60) {
    document.getElementById("PARAGRAPH").innerHTML = "From 41 to 61";
} else if (x >= 61 && x <= 80) {
    document.getElementById("PARAGRAPH").innerHTML = "From 61 to 81";
} else if (x >= 81 && x <= 100) {
    document.getElementById("PARAGRAPH").innerHTML = "From 81 to 100";
}

如果一个条件为真，

如果将停止。使用您的方法，值1的所有条件都为真。并且“从81到100”是最后一个，所以你会看到这个。所有其他字符串也会插入 - 但只需几分之一秒，所以你只是不认识它。

使用jquery </p>根据更改的值更改<p>文本

4 个答案: