更改按钮并在悬停状态下添加表单

I have a 'Pending' button. Which does nothing. Awesome. But what I'd like to do is when a user hovers over it, have a <form> appear and change the 'Pending' to 'Cancel'.

我有一个“挂起”按钮。什么也不做。太棒了。但我想做的是，当用户悬停在它上面时，出现一个

并将'Pending'改为'Cancel'。

http://jsfiddle.net/ym4SK/

http://jsfiddle.net/ym4SK/

I'm not a js pro by any means. I don't know what I'm doing wrong. Suggestions?

我不是一个js专业人士。我不知道我做错了什么。建议吗?

Your help is greatly appreciated, thank you!

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

6 个解决方案

#1

another way to do it is to use the .hover() function in jquery.

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

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

check out this jsfiddle

看看这个jsfiddle

#2

Guess you missed the $?

猜你错过了钱?

$(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/1/

Updated fiddle: http://jsfiddle.net/ym4SK/5/

#3

Take a look at this: http://jsfiddle.net/ym4SK/4/

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

Well, initially cancel is shown, but you may add a display:none on your button.cancel in HTML. Like here

首先显示的是cancel，但是您可以在按钮上添加一个display:none。取消在HTML中。像这里

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

#4

jsFiddle demo

Changed HTML:

改变了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>

Added to CSS:

添加到CSS:

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

Fixed jQuery:

固定的jQuery:

(function(){

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

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

}());

#5

It's not 100% clear what you're trying to do, but this is my best guess:

你想做什么还不是100%清楚，但这是我最好的猜测:

http://jsfiddle.net/ym4SK/

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

Note: it's best to use hover for things like this.

注意:像这样的东西最好使用鼠标悬停。

#6

heres something, all code here instead of fiddle.

这里有一些东西，所有的代码都在这里而不是小提琴。

First of all, as your question decleares, you want to Pending button change to Cancel, so im stripped another button from html

首先，当你的问题去学习时，你想要挂起按钮更改以取消，所以我从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>​

now some jQuery action.

现在一些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();
    });

Thats about it! Works like a charm! You might want to add some css to form, eg. make it float next to button or something?

这是关于它的!就像一个魅力!您可能想要添加一些css到表单中，例如。让它在按钮旁边浮动?