jQuery更好的编写if条件的方式

Question

我正在处理一个带有jQuery的ASP.NET MVC代码，需要处理一个if语句。我不确定我写的方式是否正确。有没有建议可以重构下面的代码？

@if (Model.HasRecords)
{
    <script>
        $(function () {
            $("#cancel").hide();
        });
    </script>
}
else
{
    <script>
        $(function () {
            $("#cancel").show();
        });
    </script>
}

- Kurkula

Answer 1

你可以使用Razor三元运算符来优化它。

<script>
    $(function () {
        $("#cancel")[e-mail](Model.HasRecords ? "hide();" : "show();")
    });
</script>

比起在JavaScript中处理这个问题，更好的方法是，你可以将#cancel元素包裹在一个语句中，只有当模型存在记录时才将其写入输出。因此，在你的HTML文件中，可以像这样编写（假设它是一个输入框，但它也可以是任何其他类型的HTML元素）：

@if (Model.HasRecords) {
    <input type="button" id="cancel">Cancel</input>
}

这会更有意义。

- krillgar

---

为什么你会写出这样的代码呢？你应该提前隐藏HTML，而不是依赖JavaScript来处理样式，这本来可以在后端轻松完成。你的JavaScript应该放在外部文件中。 - mistahenry

我不会像这样编写代码，但我正在回答OP的问题。这将是实现直接提出的问题最简单的方法。 - krillgar

这个代码显然很聪明，但看起来非常粗糙和拙劣。他想知道如何重构他的代码，我真的认为推荐像这样的东西是错误的。 - mistahenry

像我的原始答案这样的回答更适合于编程高尔夫堆栈交换网站。我已经更新了我的答案，采用了一种不涉及JavaScript的不同方法。当我得到这个问题时，我的思维方式更多地是直接关注被问到的内容，而不是扩展和思考完全不同的解决方案。 - krillgar

Answer 2

尝试这个：

<script>
    $(function () {
        @if (Model.HasRecords)
        {
            @:$("#cancel").hide();
        }
        else
        {
            @:$("#cancel").show();
        }
    });
</script>

谢谢！

- Saranga

Answer 3

处理条件显示的最佳方式是使用$("#cancel").toggle();。也就是说，如果某些内容被隐藏了，toggle将会显示它。如果它已经显示了，那么它将会隐藏它。因此，如果您需要根据页面状态来确定使用哪个函数，而不是动态地确定它是否隐藏或显示并返回一个函数，您可以使用toggle，让jquery为您完成这项工作。

如果这些注释是asp.net代码，您应该在此处处理逻辑，并且要么根本不将标记写入您的html中，要么为#cancel html节点添加style="display:none"。这就是jquery在幕后为您执行的show或hide操作，因此最好避免在javascript中有条件地添加它，而是自己添加这个样式。看起来更加清晰简洁。

- mistahenry

---

你不应该使用 toggle，因为它不会来回切换。每次页面加载时，它只会是其中之一。 - krillgar

我知道toggle的作用。我只是在告诉他，如果他真的想这样做，那么这个存在。有条件地添加脚本绝对不是正确的方法。 - mistahenry

如果这是页面上所有的Javascript，那么我会选择内联添加类（而不是硬编码样式），甚至可以使用Razor在DOM中根本不添加按钮。 - krillgar