Question

我们需要让用户在<input type='number'>中输入一个数字，如果它是否定的，则会应用negative样式，这会使显示的文字变为红色。但是，我无法使if语句生效。

HTML：

<span class="input">
    <input type="text" value="-">
    <input type="number" class="hidden">
</span><br>
<span class="input">
    <input type="text" value="-">
    <input type="number" class="hidden">
</span>

$(this).prev().addClass('negative');在以下if语句中无效：

$(document).ready(function(){
    $('.input [type="text"]').on('focus', function(){
        $(this).next().removeClass().focus();
        $(this).addClass('hidden');
    });
    $('.input [type="number"]').on('blur', function(){
        var number = Math.round($(this).val() * 100) / 100;
        var text = number.toFixed().toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
        if (number < 0) {
            $(this).prev().addClass('negative');
            text = "("+text.replace(/-/g,"")+")";
        }
        if (!number) {text = "-";}
        $(this).prev().val(text);
        $(this).prev().removeClass();
        $(this).addClass('hidden');
    });
});

Fiddle。如果你从if语句中删除它，它就会起作用，所以问题似乎是$(this)没有进入if语句。（修改：似乎我对此的假设不正确。请参阅下面的评论。）These two类似问题利用.filter来解决此问题，但我无法弄清楚如何使用上面的代码。

那么我该如何让它发挥作用呢？

Answer 1

您的问题不在$this甚至if的范围内。问题是您正在使用negative将文章$(this).prev().addClass('negative');添加到文本框中，然后在执行$(this).prev().removeClass();

后再将其删除约5行

您需要指定您只想删除类hidden，并且该位工作正常。

之后你还需要处理它们是否从负变为正，所以添加另一个块来删除negative类。

最后，首先检查if(!number)并在之后执行其他路径可能更安全。

＆＃13;

$(document).ready(function(){
    $('.input [type="text"]').on('focus', function(){
        $(this).next().removeClass().focus();
        $(this).addClass('hidden');
    });
    $('.input [type="number"]').on('blur', function(){
        var number = Math.round($(this).val() * 100) / 100;
        var text = number.toFixed().toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")
        if (!number) {
            text = "-";
            $(this).prev().removeClass('negative');
        }
        else if (number < 0) {
            $(this).prev().addClass('negative');
            text = "("+text.replace(/-/g,"")+")";
        } else {
            $(this).prev().removeClass('negative');
        }

        $(this).prev().val(text);
        $(this).prev().removeClass('hidden');
        $(this).addClass('hidden');
    });
});

＆＃13;

input {
    text-align:right;
    width:10em;
    /* box-sizing keeps width fixed when adding padding (http://stackoverflow.com/a/9484932/1652620) */
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}

.input [type='text'] {
    background-color:yellow;
    padding-right:14px; /* line up with number text */
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}
.input [type='number'] {background-color:orange;}
.hidden {display:none;}
.negative {color:red;}

/* Formatting to add $ sign (http://stackoverflow.com/q/8222528/1652620) */
.input {position: relative;}
.currency_symbol {
	font-size:0.6em;
    position:absolute;
    top:7px;
    left:5px;
}
.currency_symbol::before {content:"$"}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<span class="input">
    <input type="text" value="-" />
    <input type="number" class="hidden" />
</span>
<br/>
<span class="input">
    <input type="text" value="-" />
    <input type="number" class="hidden" />
</span>

＆＃13;

<强> Updated Fiddle

Answer 2

您可以简单地将$(this)隔离在变量中，如下所示：

$('.input [type="number"]').on('blur', function(){
    var number = Math.round($(this).val() * 100) / 100;
    var number = Math.round($(this).val() * 100) / 100;
    var text = number.toFixed().toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    var this$ = $(this);
    if (number < 0) {
         this$.prev().addClass('negative');
        text = "("+text.replace(/-/g,"")+")";
    }
[...]

在if语句中使用$（this）

2 个答案: