4

div 内に単語があります。これはドロップダウンの一部ですが、ドロップダウンは非表示になっています。具体的な焦点は現在「DC」にあります...下の画像では売上高を調べていました:

HTML:

<td class="edit">
<select class="touch" style="display: none;">
<option value="11">Rebuying</option><option value="12">Sales</option></select>
<span class="look">DC</span>
</td>

クリックする前は単なるテキストです

「DC」という単語をクリックすると、ドロップダウン選択が表示されます。クラスが編集から編集に変更されたことに注意してください。

<td class="editing" data-oldvalue="13">
<select class="touch" style="display: inline-block;">
<option value="11">Rebuying</option><option value="12">Sales</option></select>
<span class="look" style="display: none;">DC</span>
</td>

販売をクリックすると、ドロップダウンが表示されます

これが私の関数ですshow() hide()：

//allow flipping between "look" and "touch" mode for all editable fields
        $('td.edit' + suffix).click(function(event) {
            //make this the only TD in "editing" mode
            event.preventDefault();
            back_to_look();        
            td_to_touch($(this));
        });

        var mouse_is_inside = false;

        $(document).ready(function()
        {
            $('td.edit').hover(function(){ 
                mouse_is_inside=true; 
            }, function(){ 
                mouse_is_inside=false; 
            });

            $("body").click(function(){ 
                if(! mouse_is_inside) $('.touch').hide();
                back_to_look();
            });
        });

function back_to_look() {
    $('td.editing ,td.edit.new').each(function() {
        $(this).children('.look').show();
        $(this).children('.touch').hide();
        if (!$(this).hasClass('edit')) {
            $(this).addClass('edit');
        }
        if ($(this).hasClass('editing')) {
            $(this).removeClass('editing');
        }
    });
}

function td_to_touch(td) {
    var theTouch = td.children('.touch');
    var theLook = td.children('.look');
    var oldVal = theLook.text().trim();

    td.addClass('editing');
    td.removeClass('edit');
    theLook.hide();
    theTouch.show();

    //save the existing value so it can be compared to when the "change" event is fired on the element
    td.attr('data-oldvalue', theTouch.val());

    if (theTouch.is('select')) {        
        theTouch.children('option:contains(' + oldVal + ')').attr('selected', 'selected');
    } else {
        theTouch.val(oldVal);
    }
}

最初の部分は問題なく動作します。「DC」という単語をクリックすると、ドロップダウンが表示されます...そして、divの外側をクリックして本体に戻ると、非表示になります。mouseup()問題は、ドロップダウン選択ボックスが表示されていて、それをクリックして選択を行うと、関数を使用しているため、選択を行う前に消えてしまうことです。

人々が選択できるようにする必要があり、その後、divの外側をクリックすると消えます。

.live、on(click、function()) など、ほぼすべてを使用してみました。どんな助けでも大歓迎です。ありがとうございました。

概要:ドロップダウンが開いたままにならないので、mouseup() を使用しているため選択できます。

今、テキストをクリックすると、ドロップダウンと日付ピッカーの両方がランダムにポップアップします。 

 <td class="edit">
                        <input type="text" class="touch dtpick">
                        </input>
                        <span class="look">
                            <?php echo $project->get_est_date(); ?>
                        </span>
                    </td>
                    <td class="edit">
                        <input type="text" class="touch dtpick">
                        </input>
                        <span class="look">
                            <?php echo $project->get_due_date(); ?>
                        </span>
                    </td>
                    <td class="edit">
                        <input type="text" class="touch dtpick">
                        </input>
                        <span class="look">
                            <?php echo $project->get_next_date(); ?>
                        </span>
                    </td>

dtpick クラスも touch であるため、少し風変わりです。あっ！

4

1 に答える 1

3

それは<select>要素なので、.focusout()うまくいきます。

$('.look').click(function(){
    $(this).hide();
    $('.touch').show().focus();
});

$('.touch').focusout(function(){
   $(this).hide();
   $('.look').show();
});

同じクラスで複数の要素を起動している場合は、より優れたセレクターが必要です。'.look'set ofと'.touch'for eachがあることに気付きました<td>。.siblings()同じ親<td>でのみ要素を検索するために使用できます。

$('.look').click(function(){
    $(this).hide();
    $(this).siblings('.touch').show().focus().focusout(function(){
        $(this).hide();
        $(this).siblings('.look').show();
    });
});

フィドルも更新しました

于 2013-11-01T06:18:36.300 に答える