Javascript 如何使用图像按钮在jQuery中使用onclick_Javascript_C#_Jquery

Javascript 如何使用图像按钮在jQuery中使用onclick

javascript c# jquery

Javascript 如何使用图像按钮在jQuery中使用onclick,javascript,c#,jquery,Javascript,C#,Jquery,当我不使用OnClick时，我可以看到鼠标悬停的效果：当我使用OnClick时，我看不到鼠标悬停效果：这是我的代码： <head> <title></title> <style type="text/css"> .Empty { background: URL("images/Category/Empty.gif"") no-repeat right top; }

当我不使用OnClick时，我可以看到鼠标悬停的效果：

当我使用

OnClick

时，我看不到鼠标悬停效果：

这是我的代码：

<head>
<title></title>

<style type="text/css">
        .Empty
        {
            background: URL("images/Category/Empty.gif"") no-repeat right top;
        }
        .Empty:hover
        {
            background: url("img src="images/Category/Filled.gif") no-repeat right top;
        }
        .Filled
        {
            background: url("img src="images/Category/Filled.gif") no-repeat right top;
        }
        .Filled
        {
            background-image: <img src= "images/Category/Filled.gif" />;
        }
    </style>

    <script type="text/javascript">

            function Decide(option) {
                var temp = "";
                document.getElementById('lblRate').innerText = "";

                    if (option == 1) {
                        document.getElementById('Rating1').className = "Filled";
                        document.getElementById('Rating2').className = "Empty";
                        document.getElementById('Rating3').className = "Empty";
                        document.getElementById('Rating4').className = "Empty";
                        document.getElementById('Rating5').className = "Empty";
                        temp = "1-Poor";
                    }

                if (option == 2) {
                    document.getElementById('Rating1').className = "Filled";
                    document.getElementById('Rating2').className = "Filled";
                    document.getElementById('Rating3').className = "Empty";
                    document.getElementById('Rating4').className = "Empty";
                    document.getElementById('Rating5').className = "Empty";
                    temp = "2-Ok";

                }
                if (option == 3) {
                    document.getElementById('Rating1').className = "Filled";
                    document.getElementById('Rating2').className = "Filled";
                    document.getElementById('Rating3').className = "Filled";
                    document.getElementById('Rating4').className = "Empty";
                    document.getElementById('Rating5').className = "Empty";
                    temp = "3-Fair";
                }
                if (option == 4) {
                    document.getElementById('Rating1').className = "Filled";
                    document.getElementById('Rating2').className = "Filled";
                    document.getElementById('Rating3').className = "Filled";
                    document.getElementById('Rating4').className = "Filled";
                    document.getElementById('Rating5').className = "Empty";
                    temp = "4-Good";
                }
                if (option == 5) {
                    document.getElementById('Rating1').className = "Filled";
                    document.getElementById('Rating2').className = "Filled";
                    document.getElementById('Rating3').className = "Filled";
                    document.getElementById('Rating4').className = "Filled";
                    document.getElementById('Rating5').className = "Filled";
                    temp = "5-Nice";
                }
                document.getElementById('lblRate').innerText = temp;
                return false;

            }


    </script>
</head>
<body>
    <form id="form1" runat="server">
    <asp:Label ID="Label1" runat="server" Text="Rate The Product"></asp:Label><br />
    <asp:ImageButton BorderStyle="None" ID="Rating1" onmouseover="return Decide(1);"
        OnClientClick="return Decide(1);" Height="20px" Width="20px" CssClass="Empty"
        src="images/Category/Empty.gif" runat="server" OnClick="imagebutton" />
    <asp:ImageButton BorderStyle="None" ID="Rating2" onmouseover="return Decide(2);"
        OnClientClick="return Decide(2);" Height="20px" Width="20px" CssClass="Empty"
        src="images/Category/Filled.gif" runat="server" OnClick="imagebutton" />
    <asp:ImageButton BorderStyle="None" ID="Rating3" onmouseover="return Decide(3);"
        OnClientClick="return Decide(3);" Height="20px" Width="20px" CssClass="Empty"
        src="images/Category/Filled.gif" runat="server" OnClick="imagebutton" />
    <asp:ImageButton BorderStyle="None" ID="Rating4" onmouseover="return Decide(4);"
        OnClientClick="return Decide(4);" Height="20px" Width="20px" CssClass="Empty"
        src="images/Category/Filled.gif" runat="server" OnClick="imagebutton" />
    <asp:ImageButton BorderStyle="None" ID="Rating5" onmouseover="return Decide(5);"
        OnClientClick="return Decide(5);" Height="20px" Width="20px" CssClass="Empty"
        src="images/Category/Filled.gif" runat="server" On Click="image button" />
    <br />
    <br />
    <asp:Label ID="lblRate" runat="server" Text=""></asp:Label>
    </div>
    </form>
</body>
</html>


.空的
{
背景：URL（“images/Category/Empty.gif”）右上方无重复；
}
.空：悬停
{
背景：url（“img src=“images/Category/Filled.gif”）不重复右上方；
}
.填充
{
背景：url（“img src=“images/Category/Filled.gif”）不重复右上方；
}
.填充
{
背景图像：；
}
功能决定（选项）{
var temp=“”；
document.getElementById（'lblRate'）。innerText=“”；
如果（选项==1）{
document.getElementById（'Rating1'）。className=“Filled”；
document.getElementById（'Rating2'）.className=“Empty”；
document.getElementById（'Rating3'）。className=“Empty”；
document.getElementById（'Rating4'）.className=“Empty”；
document.getElementById（'Rating5'）。className=“Empty”；
temp=“1-差”；
}
如果（选项==2）{
document.getElementById（'Rating1'）。className=“Filled”；
document.getElementById（'Rating2'）.className=“Filled”；
document.getElementById（'Rating3'）。className=“Empty”；
document.getElementById（'Rating4'）.className=“Empty”；
document.getElementById（'Rating5'）。className=“Empty”；
temp=“2-Ok”；
}
如果（选项==3）{
document.getElementById（'Rating1'）。className=“Filled”；
document.getElementById（'Rating2'）.className=“Filled”；
document.getElementById（'Rating3'）。className=“Filled”；
document.getElementById（'Rating4'）.className=“Empty”；
document.getElementById（'Rating5'）。className=“Empty”；
temp=“3-Fair”；
}
如果（选项==4）{
document.getElementById（'Rating1'）。className=“Filled”；
document.getElementById（'Rating2'）.className=“Filled”；
document.getElementById（'Rating3'）。className=“Filled”；
document.getElementById（'Rating4'）。className=“Filled”；
document.getElementById（'Rating5'）。className=“Empty”；
temp=“4-良好”；
}
如果（选项==5）{
document.getElementById（'Rating1'）。className=“Filled”；
document.getElementById（'Rating2'）.className=“Filled”；
document.getElementById（'Rating3'）。className=“Filled”；
document.getElementById（'Rating4'）。className=“Filled”；
document.getElementById（'Rating5'）。className=“Filled”；
temp=“5-Nice”；
}
document.getElementById（'lblRate'）。innerText=temp；
返回false；
}

我使用了这段代码进行评级，它正在工作，但问题是，当我单击“图像”按钮时，我希望它将我重定向到下一页获取其值。但当我使用

$（“p”）。单击（函数（）{}；

这个点击

OnClick

的方法会将我重定向到下一页，但问题是，它会停止向我显示鼠标悬停时显示的值。

我想你可以尝试为每个图像的点击创建一个自定义表单

这样，您就可以在单击每个图像时将任何参数传递到新页面

只需确保服务器端的新页面正确处理了参数

function imgOnClick(valueFromImage)
{
    var url = 'http://example.com/newPage';
    var form = $('<form action="' + url + '" method="post">' +
      '<input type="text" name="api_url" value="' + Return_URL + '" />' +
      '<input type="text" name="yourValue1" value="helloworld" />' +
      '</form>');
    $('body').append(form);
    form.submit();
}

函数imgOnClick（value from图像）
{
var url='1〕http://example.com/newPage';
变量形式=$（''）+
'' +
'' +
'');
$（'body'）。追加（表格）；
表单提交（）；
}

我认为您可以尝试为每个图像的点击创建自定义表单

这样，您就可以在单击每个图像时将任何参数传递到新页面

只需确保服务器端的新页面正确处理了参数

function imgOnClick(valueFromImage)
{
    var url = 'http://example.com/newPage';
    var form = $('<form action="' + url + '" method="post">' +
      '<input type="text" name="api_url" value="' + Return_URL + '" />' +
      '<input type="text" name="yourValue1" value="helloworld" />' +
      '</form>');
    $('body').append(form);
    form.submit();
}

函数imgOnClick（value from图像）
{
var url='1〕http://example.com/newPage';
变量形式=$（''）+
'' +
'' +
'');
$（'body'）。追加（表格）；
表单提交（）；
}

据我所知，悬停绑定到CSS样式。事件注册不可能阻止它工作。问题出在其他地方。你能告诉我如何编写onclick吗？以及在哪里编写吗？你确定你已经编写了有效的CSS代码吗？是的。我可以向你展示CSS吗？欢迎使用堆栈溢出！我已经编辑了你的问题。看起来像您已经在这里提供了所有相关信息，所以我将对这一条进行投票。一个小提示：您可以通过将内容缩进4个空格将其放入

代码标记中。您的第一行（
和
）没有足够的缩进，所以它们最初是不可见的。祝你好运，希望你能得到一个答案！在我看来，悬停是绑定到CSS样式的。事件注册不可能阻止它工作。问题是在其他地方。你能告诉我如何写onclick吗？以及在哪里写你确定你写了有效的CSS co吗de？是的。我可以给你看css吗？欢迎来到Stack Overflow！我已经编辑了你的问题。看起来你已经在这里给出了所有相关的信息，所以我将对这个问题进行投票。一个小提示：你可以将东西缩进4个空格，放入代码标记中。你的第一行（
和
）