Question

我有一个'待定'按钮。什么也没做。真棒。但我想做的是当用户将鼠标悬停在其上时，显示<form>并将“待定”更改为“取消”。

我无论如何都不是js pro。我不知道我做错了什么。建议？

非常感谢您的帮助，谢谢！

Answer 1

猜猜你错过了$？

$(function(){
    function revealButton(shown, hidden) {
        $(shown).mouseenter(function(){
            $(this).parent().next().children(hidden).show();
        });

        $(hidden).mouseleave(function(){
            $(this).hide();
        });
    };
    revealButton("button.pending", "button.cancel");
}());

http://jsfiddle.net/ym4SK/1/

更新了小提琴：http://jsfiddle.net/ym4SK/5/

Answer 2

看看这个：http://jsfiddle.net/ym4SK/4/

嗯，最初显示取消，但您可以在HTML中的button.cancel上添加display：none。像here

一样

(function(){
    function revealButton(shown, hidden) {
        $(shown).mouseenter(function(){
            $(this).parent().next().children(hidden).show();
            $(shown).hide();
        });

        $(hidden).mouseleave(function(){
            $(this).hide();
            $(shown).show();
        });
    };
    revealButton("button.pending", "button.cancel");
}());

Answer 3

另一种方法是在jquery中使用.hover()函数。

$(function(){
    $('button').hover(
        function(){
            $(this).html('Cancel').removeClass("pending").addClass("cancel");
        },
        function(){
            $(this).html('Pending').removeClass("cancel").addClass("pending");
        }
    );
});

查看此jsfiddle

Answer 4

jsFiddle demo

更改了HTML：

<div>
    <form method="POST" action="yaddaydahdasda">
        <button class="pending">Pending</button>
        <button type="submit" class="cancel">Cancel</button>

        token here
        <input type="hidden" value="myvalue" />       
    </form>
</div>

添加到CSS：

.cancel{
    position:absolute;
    cursor:pointer;
    left:0px;
    top:0px;
    /* ... */
}

修正了jQuery：

(function(){

    function revealButton(shown, hidden) {
        $(shown).mouseenter(function(){
            $(this).next( $(hidden) ).show(); // fixed
        });

        $(hidden).mouseleave(function(){
            $(this).hide();
        });
    }
    revealButton(".pending", ".cancel");

}());

Answer 5

这不是100％清楚你想要做什么，但这是我最好的猜测：

http://jsfiddle.net/ym4SK/

(function(){
    function revealButton(shown, hidden) {
        $(hidden).hide();
        $(shown).hover(function()
                       {
                           $(hidden).show();
                           $(shown).hide();
                       }, function() {});
        $(hidden).hover(function() {}, function()
                        {
                           $(shown).show();
                           $(hidden).hide();
                        });
    };
    revealButton("button.pending", "button.cancel");
}());

注意：最好使用hover来做这样的事情。

Answer 6

这是所有代码，而不是小提琴。

首先，当你的问题解除时，你想要将Pending按钮更改为Cancel，所以我从html中删除了另一个按钮

<div>
    <input type='submit' class="pending" value='Pending' />
</div>
<form method="POST" action="yaddaydahdasda" id="form">
    {% csrf_token %}
    <input type="hidden" value="myvalue" />
</form>

现在有一些jQuery动作。

<script type='text/javascript'>

    $(document).ready(function() {
        // if jquery dosent load for some reason, form will be visible. Thats why we hide it when on DOM ready
        $("#form").hide();

    });

    $(".pending").on('mouseover',function() {
        $(this).removeClass('pending').addClass('cancel');
        $(this).val('Cancel');
        $("#form").show();
    });

    $(".pending").on('click', function(e) {
        e.preventDefault();
        return false;
    });

    $(".cancel").on('click',function() {
        $(this).removeClass('cancel').addClass('pending');
        $(this).val('Pending');
        $("#form").hide();
    });

多数民众赞成！奇迹般有效！您可能想要添加一些css来形成，例如。让它漂浮在按钮旁边？

更改按钮并在悬停时添加表单

6 个答案:

更新了小提琴：http://jsfiddle.net/ym4SK/5/

jsFiddle demo