Question

我正在尝试根据Text完成更改asp：Button（用户控件）的背景图像的任务。它基本上是一个切换操作（开/关）背景图像。

我想使用getElementByID将Text元素放入我的javaScript函数中的int变量中。但这似乎不起作用。这是我的javascript + asp.net代码：

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="ButtonControl.ascx.cs" Inherits="WebUI.ButtonControl" %>
<link href="Content/ButtonStyles.css" rel="stylesheet" />

<script src="http://code.jquery.com/ui/1.8.23/jquery-ui.min.js" type="text/javascript"></script>

<script type="text/javascript">
    function toggleButtonImage()
    {

        **THE ERROR IS HERE**
        var btnValue = parseInt(document.getElementById('<%=Button.ClientID%>').value);

        //if Text value greater than one then display image
        if (btnValue > 1)
        {
            $(document).ready(function ()
            {
                $("#AcumenButton").click(function ()
                {
                    $("#AcumenButton").addClass("buttonBackgroundOn");
                    return false;
                });
            });
        }

        // else no image
        else
        {
            $(document).ready(function ()
            {
                $("#Button").click(function ()
                {
                    $("#Button").addClass("buttonBackgroundOff");
                    return false;
                });
            });
        }

    }
</script>

<asp:Button ID="Button" runat="server" Text="3" Width="7.2%" Height="79px" />

这是我的两个类的CSS：

.buttonBackgroundOn 
{
    background: url(/Images/BlobOnButtonImg.PNG) no-repeat !important;
    width: 400%;
    height: 100%;
}

buttonBackgroundOff 
{
    background: url(/Images/PlainBorderButtonImg.PNG) no-repeat !important;
    width: 400%;
    height: 100%;
}

使用此用户控件的页面中包含以下内容：.cs class：

ClientScript.RegisterStartupScript(this.GetType(), "js", "toggleButtonBorder();", false);

我真的不知道我哪里错了。有什么建议吗？

Answer 1

经过大量挖掘后，我发现JavaScript可能不是这里使用的最佳工具。相反，我在用户控件ascx.cs类中为按钮设置了CssClass，以便为我提供所需的结果：

protected void Page_Load(object sender, EventArgs e)
    {
        ToggleButtonImage(int.Parse(ButtonText));            
    }
public int ToggleButtonImage(int btnTextValue) 
        {
            int btnTextVal = btnTextValue;

            if (btnTextVal > 1)
            {
                Button.CssClass = "buttonBackgroundOn";
            }
            else if (btnTextVal <= 1)
            {
                Button.CssClass = "buttonBackgroundOff";
            }
            return btnTextVal;
        }

这样做要简单得多。

Answer 2

<script type="text/javascript">
    $(document).ready(function ()
            {


        **THE ERROR IS HERE**
        var btnValue = parseInt(document.getElementById('<%=AcumenButton.ClientID%>').value);

        //if Text value greater than one then display image
        if (btnValue > 1)
        {
             $("#AcumenButton").click(function ()
                {
                    $("#AcumenButton").addClass("buttonBackgroundOn");
                    return false;
                });

        }

        // else no image
        else
        {

                $("#AcumenButton").click(function ()
                {
                    $("#AcumenButton").addClass("buttonBackgroundOff");
                    return false;
                });

        }

    });
</script>

将asp：Button Text添加到JavaScript函数中

2 个答案: