0

私の質問を見てくれてありがとう。基本的に何が起こっているのか、1 ページに複数 (12) の入力フィールド (id="editname") と div (id="iconbar") があります。入力フィールドをクリックするとアイコンバーがスライドインし、次のいずれかが発生したときにスライドアウトするようにしたいと思います: 1. onblur 2. チェックをクリックします 3. x をクリックします

ページにもjqueryをロードしました。

データベースのレコード ID を取得する $id 変数があるので、必要に応じてそれを ID に割り当てることができます。

どんな援助でも大歓迎です。これが私のコードです：

<div class="recordset">
    <div class="boxes">
        <input type="text" name="name" id="nameedit<?php echo $id; ?>" value="'.$name.'" />
        <input type="hidden" name="number" value="'.$number.'" />
        <input type="hidden" name="id" value="'.$id.'" />
        <div class="clearfix"></div>
        <div class="recordbottom">
            <div class="playrecord">
                <embed ... (left blank) />
            </div>
            <div class="icons" id="icons<?php echo $id; ?>">
                <a href="records.php"><img src="x.png" width="18" /></a>
                <a href="#"><img src="check.png" width="18" /></a>
            </div>
        </div>
    </div>
</div>

他にご不明な点がございましたら、お気軽にお問い合わせください。

編集:単純なCSSフォーカス疑似でさえ、約25〜30の異なる方法を試しました。私が試した最新の方法は次のとおりです:

$('#nameedit').focus(function() {
    $('div.icons').show().bind('focusoutside clickoutside',function(e) {
        $(this).unbind('focusoutside clickoutside').fadeOut('medium');
    });
});
$('div.icons').hide();

これはうまくいきませんでした。私が試した別の方法は次のとおりです。

うーん.... Ctrl-Zをすべて使い果たしたので、決定的なものを示すことはできません。私はjqueryを検索し、ここから約20ほどだけでなく、さまざまな試みをグーグルで検索しました。

PHP は私のメインのプログラミング言語で、JS はタッチ アンド ゴーです。

4

3 に答える 3

0

わかりました、私はそれをはるかに良くしましたが、今問題は何ですか? これは正しい方法ですか？

$('editrecord') セクションは、入力の値を取得することから始まり、後で使用するために変数に保存します (誰かがキャンセル画像をクリックすると、テキストが元に戻ります)。次に、アニメーション スライドを含むアイコン バーを表示します (アイコン バーには、キャンセルと保存の X と CHECK が含まれています)。プレーヤー バーは各レコードの全長を占めるため、スライド アウト アニメーションでプレーヤー バーを非表示にします。

$('.save_record') セクションは CHECK のクリックを待機し、クリックするとレコード ID を待機中の saverec.php に送信します (ID を取得した GET があることに気付きました。私は POST 経由で送信されるので、もう必要ありません)。おそらくアイコンバーの非表示とプレーヤー バーの表示を成功関数内に配置する必要がありますが、どちらの方法でも機能するようになりました。

最後に、$('.cancel_record') セクションは 3 つの単純なことを行い、テキストを入力ボックスに戻し (キャンセルしたため)、アイコンを非表示にし、プレーヤー バーを表示します。

jQuery を使用した JavaScript の最初の経験としては悪くありません (私の意見では)。

$('.editrecord').on('focus', function (){
    editname = $('#editname' + $(this).data('target')).val();
    $('#iconbar' + $(this).data('target')).show("slow", function() {});
    $('#playerrecord' + $(this).data('target')).hide("slow", function() {});
});

$('.save_record').on('click', function (){
    $.ajax({
        type: "POST",
        url: "saverec.php?id=" + $(this).data('target'),
        data: jQuery('#saverecord' + $(this).data('target')).serialize(),
        success: function(data){
        }
    });
    $('#iconbar' + $(this).data('target')).hide("slow", function() {});
    $('#playerrecord' + $(this).data('target')).show("slow", function() {});
})

$('.cancel_record').on('click', function () {
    $('#editname' + $(this).data('target')).val(editname);
    $('#iconbar' + $(this).data('target')).hide("slow", function() {});
    $('#playerrecord' + $(this).data('target')).show("slow", function() {});
});
于 2013-11-13T04:00:06.620 に答える
0

私はこれを作った： http://fiddle.jshell.net/5GB4Z/

私はjquery 1.8.3を参照していることに注意してください。「on」メソッドは古いjqueryバージョンでは機能しないと思います。

于 2013-11-12T13:25:24.223 に答える
0

まあ、忍耐には報酬が伴うと思います...

http://jsfiddle.net/AgGPh/

$('.editrecord').on('focus', function () {
    $('#icons' + $(this).data('target')).show("slow", function() {
        $( this ).prev().hide( "fast", arguments.callee );
    });
});
$('.editrecord').on('blur', function () {
    $('#icons' + $(this).data('target')).hide("slow", function() {
        $( this ).prev().hide( "fast", arguments.callee );
    });
});

きれいではありませんが、機能的です。これが最善の方法であるかどうかはわかりませんが、フィドルで動作しますが、私のコードを試してみて、何が起こるか見てみましょう.

ありがとう、ジェフ

于 2013-11-12T13:57:09.003 に答える