4

我有一个“待定”按钮。什么都不做。惊人的。但是我想做的是当用户将鼠标悬停在它上面时，<form>出现并将“待定”更改为“取消”。

http://jsfiddle.net/ym4SK/

无论如何，我都不是 js 专业人士。我不知道我做错了什么。建议？

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

4

6 回答 6

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/

于 2012-09-17T17:13:29.690 回答
1

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

好吧，最初会显示取消，但您可以在 HTML 中的 button.cancel 上添加 display:none。喜欢这里

(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");
}());​
于 2012-09-17T17:20:34.290 回答
1

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

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

看看这个jsfiddle

于 2012-09-17T17:20:34.240 回答
1

jsFiddle 演示

更改的 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");
    
}());
于 2012-09-17T17:25:04.570 回答
0

目前还不是 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用于这样的事情。

于 2012-09-17T17:21:58.387 回答
0

继承人的东西，这里的所有代码而不是小提琴。

首先，当您的问题解除时，您希望将待定按钮更改为取消，所以我从 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，例如。让它漂浮在按钮或其他东西旁边？

于 2012-09-17T18:35:15.030 回答