个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-28 05:16:13 25 4
gpt4 key购买 nike

当我不使用OnClick时，我可以看到mousehover的效果:
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 的此方法会将我重定向到下一页，但问题是，它将停止向我显示鼠标悬停时间上显示的值。

最佳答案

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

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

关于javascript - 如何在 jQuery 中使用图像按钮使用 onclick，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40969732/

25 4 0
文章推荐： html - 使用自定义 CSS 内容处理列表项内的段落
文章推荐： C++:两个独立的函数在嵌套时返回不同的结果？
文章推荐： jquery - 如何在两个 Bootstrap 导航栏类之间添加过渡
文章推荐： c++ - 静态变量在不同模块之间共享值
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com