4

「保留」ボタンがあります。これは何もしません。素晴らしい。しかし、私がやりたいのは、ユーザーがその上にカーソルを置いて<form>表示し、「保留中」を「キャンセル」に変更することです。

http://jsfiddle.net/ym4SK/

私は決してjsのプロではありません。何が間違っているのかわかりません。提案？

あなたの助けは大歓迎です、ありがとう!

4

6 に答える 6

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 に答える
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/

最初は cancel が表示されていますが、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 に答える
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 に答える
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 に答える