Question

当我不使用OnClick时，我可以看到鼠标悬停的效果：
when i dont use onclick i can see the effect of mousehover

当我使用OnClick时，我看不到鼠标悬停效果：
when i use onclick i am not apply to mousehover effect

这是我的代码：

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

我已经使用此代码进行评级并且它正常工作，但问题是，当我点击图片按钮时，我希望它将我重定向到下一页的价值。但是当我使用$("p").click(function () { });

时

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

Answer 1

我认为您可以尝试为每个图片构建自定义表单。

Send POST data on redirect with Javascript/jQuery?

使用它可以将任何参数传递给每个图像的新页面

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

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

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

1 个答案: