jquery - 通过 Jquery 在页面加载时显示不同的按钮

Question

我有一个我设计的 ASP.net MVC2 站点。我有一个小设计问题。我想要一个按钮在 View 加载时更改。例如，当某个变量等于某个值时，我希望一个按钮出现而另一个按钮消失。到目前为止，我所拥有的基本上是该想法的 jquery 实现。但到目前为止，我的 jquery 代码没有被调用(我在 jquery 中设置了一个调试器语句，所以我知道它没有被调用)。我试图将代码放在 $(document).ready(function()... 和 $(document).load(function()...

代码仍然没有加载。这是我尝试过的。

$(document).load(function(){           
        var $b = <%=toggle %>;
        var buttonTog = $("#test1");
        var buttonTog1 = $("#Submit1");
        if($b=="1")
        {
            debugger;
            buttonTog1.css({
                display: 'block'
            })
            buttonTog.css({
                display: 'none'
            });
        }
        else if($b=="0")
        {
            debugger;
            buttonTog1.css({
                display: 'none'
            })
            buttonTog.css({
                display: 'block'
            });
        }   
});

$(document).ready(function () {
    //debugger;
    ShowMessage();
    (function () {           
        var $b = <%=toggle %>;
        var buttonTog = $("#test1");
        var buttonTog1 = $("#Submit1");
        if($b=="1")
        {
            debugger;
            buttonTog1.css({
                display: 'block'
            })
            buttonTog.css({
                display: 'none'
            });
        }
        else if($b=="0")
        {
            debugger;
            buttonTog1.css({
                display: 'none'
            })
            buttonTog.css({
                display: 'block'
            });
        }            
    });
    ...
    });

我打算做的是检查我从 ViewData 字段中获取的变量的值，并根据该值使一个按钮或另一个按钮的 css 显示属性为 none 或 block，具体取决于以下情况类(class)。在页面首次触发时让 Jquery 代码运行的最佳方法是什么？您将如何实现这样的计划？这是完成这项工作的最佳方式，还是我应该考虑重新设计实现此功能的方式？感谢您的宝贵时间。

Answer 1

让我们尝试稍微清理一下您的代码。我们假设 toggle 是先前在页面中定义的 bool 变量，尽管 this is bad and you should use view models :

<% bool toggle = true; %>

<script type="text/javascript">
    $(function() {
        var buttonTog = $("#test1");
        var buttonTog1 = $("#Submit1");
        var toggle = <%= new JavaScriptSerializer().Serialize(toggle) %>;
        if (toggle) {
            buttonTog1.show();
            buttonTog.hide();
        } else {
            buttonTog1.hide();
            buttonTog.show();
        }
    });
</script>

但假设您在服务器上有此信息(并且您在服务器上定义了 toggle 变量后就有了)我建议您直接将相应的 CSS 类应用到服务器上的给定按钮。这样你甚至根本不需要使用任何 javascript。简单地:

<button type="submit" id="test1" class="<%= Html.ToggleClass(toggle) %>">Test1</button>
<button type="submit" id="Submit1" class="<%= Html.ToggleClass(!toggle) %>">Submit1</button>

其中 ToggleClass 将是一个自定义 HTML 帮助器，它会根据参数值返回正确的 CSS 类名:

public static class HtmlExtensions
{
    public static string ToggleClass(this HtmlHelper htmlHelper, bool toggle)
    {
        return toggle ? "visible" : "hidden";
    }
}

最后在您的 CSS 文件中:

.visible {
    display: block;
}

.hidden {
    display: none;
}