在 if 语句中使用 $(this)答案

【问题标题】：Using $(this) in an if statement在 if 语句中使用 $(this)
【发布时间】：2014-11-27 20:45:55
【问题描述】：

我们需要让用户在<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 语句。（编辑：似乎我对此的假设不正确。请参阅下面的 cmets。）These two 类似的问题使用 .filter 来解决此问题，但我无法弄清楚如何使用上面的代码使其工作。

那么我该如何让它工作呢？

【问题讨论】：

你的问题在别处，在if语句中使用$(this)是正确的。你的小提琴应该做什么？每次我点击黄色输入时它都会消失
if 语句块没有不同的范围，所以$(this) “没有进入 if” 是不正确的
现在我真的很茫然。 .replace() 函数在 if 语句中运行，$(this).prev().addClass('negative'); 在 if 语句之外运行，所以我认为我已经缩小了导致问题的范围。
这是jsfiddle.net/00pxe49t/8你想要的吗？

标签： javascript jquery html

【解决方案1】：

您的问题不在$this 甚至if 的范围内。问题是您正在使用$(this).prev().addClass('negative'); 将negative 类添加到文本框中，大约5 行后当您使用$(this).prev().removeClass(); 时再次将其删除

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

之后，如果它们从负变为正，您还需要处理，因此添加另一个块以删除 negative 类。

最后可能更安全的是先检查if(!number)，然后再执行其他路径。

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

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:"$"}

<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>

Updated Fiddle

【讨论】：

当你点击输入时它们也会消失，如果你不删除.focus()它会在FF mac上总是消失
@Huangism 在 Chrome 中对我来说似乎工作得很好——我认为这个想法是切换查看文本和数字。您使用的是哪个浏览器 - 也许它将数字输入解释为文本
更新了我的评论，FF的焦点消失了
这个 FF Mac 问题让我摸不着头脑，以至于我在a separate question 上发布了关于它的信息。如果我无法让它在 Firefox 上运行，则无法部署上面的代码。 @Huangism，如果您有任何见解，我非常感谢您对这个问题的意见。

【解决方案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,"")+")";
    }
[...]

【讨论】：