0

私は次のことをしようとしています->私は動的な数のDIV要素を持っています..すべてがそのように積み重ねられています：

 __________________________________________
|                                          |
|                                          |
|                    DIV1                  |
|                                          |
 __________________________________________
 __________________________________________
|                                          |
|                                          |
|                    DIV2                  |
|                                          |
 __________________________________________
 __________________________________________
|                                          |
|                                          |
|                    DIV3                  |
|                                          |
 __________________________________________

それぞれの内側に、同じjQuery関数を呼び出すボタンがあります。

function updateProduct(old_q,ent_id,element){
        var new_q = jQuery(element).prev().children('input').val();
        jQuery.post('/ajax_calls/checkout/update_cart_item.php', {entity_id: ent_id,old_q: old_q,new_q: new_q}, function(data) {
                cartItemOut = data;
                alert(cartItemOut);
        });
}

ご覧のとおり、jQueryを使用してTHIS要素を判別し、子/親などに関連する入力を見つけます。私の質問は、どちらかDIVの全体に「読み込み」をオーバーレイする方法、または使用するコードを指定する方法です。上記で私がどちらにいるかを判断しますか？それぞれの基本構造は次のとおりです。 DIV1DIV2 DIV3DIVDIV

<div class="item_wrapper">
        <div style="float:left; width:100px; height:100px; margin-left:15px; position:relative;">
                <div style="margin-top:100%;"></div>
                <img width="100" height="69" src="/images/100/198.jpg" style="position:absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; max-height:100%; max-width:100%; display:block; margin:auto;">
        </div>
        <div style="float:left; width:198px; margin-left:20px; margin-bottom:7px;">
                <div style="height:31px; overflow:hidden; margin-bottom:2px;">
                        <span style="font-size:12px; font-weight:bold;">Name</span>
                </div>
                <br> 
                <span style="color:#86a057;">item#: </span>198<br>
                <span style="color:#86a057;">price:</span>
                <span style="color:#000; font-weight:bold;">$107.99</span><br>

                <div style="width:300px; margin-top:10px;">

                       <div style="float:left; margin-top:4px; width:20px; margin-right:3px; color:#86a057;">qty: </div>

                       <div style="float:left; margin-right:15px;">
                       <input type="text" value="1" style="font-family:arial; font-size:13px; height:17px; margin-top:2px; width:30px; text-align: center;"></div>

                       <div onclick="updateProduct('1','198',this);" style="float:left; margin-right:7px; margin-top:3px;  width:59px; height:20px; cursor:pointer;">
                       <img src="/skin/frontend/templat/default/images/update_cart.png">
                       </div>

                       <div style="float:left; margin-right:7px; margin-top:3px;  width:59px; height:20px; cursor:pointer;">
                       <img src="/skin/frontend/template/default/images/remove_cart.png">
                       </div>

                </div>


        </div>
        <div class="clearfix"></div>
</div>

したがって、本質的に、問題はDIV、クラスに複数のが存在することitem_wrapperです。クリックすると、オーバーレイとローダーの画像でそれupdateProduct()をカバーするにはどうすればよいですか？私が試みることはすべて無駄に思えます、そして私はそれが単純な領域では不可能であると思い始めています。の位置を検出したり、その上に配置したりするのと同じくらい複雑にしようとしましたが、それは正しい解決策ではないようです。より良い方法が必要です。 DIVitem_wrapperWIDTHHEIGHTFIXED DIV

4

2 に答える 2

1

次のjQueryを使用して親divを見つけることができます。

var itemWrapper = jQuery(element).parents('.item_wrapper');

次に、そのアイテムにいくつかの読み込み要素を追加し、それに応じて位置とサイズを設定できます。

function updateProduct(old_q, ent_id, element) {
    var new_q = jQuery(element).prev().children('input').val();
    jQuery.post('/ajax_calls/checkout/update_cart_item.php', {entity_id: ent_id,old_q: old_q,new_q: new_q}, function(data) {
            cartItemOut = data;
            alert(cartItemOut);
            $(element).find('.loading-overlay').remove();
    });
    var $ = jQuery, itemWrapper = $(element).parents('.item_wrapper'),
        iHeight = itemWrapper.height(), iWidth = itemWrapper.width();
    itemWrapper.prepend($('<div class="loading-overlay"><span>Loading...</span></div>').height(iHeight).width(iWidth));
}

別の答えがすでにこれに言及しているように見えますが、要素をカバーするために絶対測位を使用する必要があります。

.loading-overlay {
    position: absolute;
    background: gray;
    z-index: 1;
    opacity: 0.5;
}

これがあなたが持っているものに似たものを使ったフィドルです：http：//jsfiddle.net/Jeff_Meadows/dyPMG/3/

于 2013-02-08T03:08:45.000 に答える
1

絶対位置を使用して要素をマスクできます。以下の例を拡張できます。

<div class="ct">
    <div class="x">
        <input type="button" Value="Test" />
    </div>
    <div class="x">
        <input type="button" Value="Test" />
    </div>
    <div class="x">
        <input type="button" Value="Test" />
    </div>
</div>

$('.ct').on('click', '.x input', function(e){
    var target = $(e.target);
    var div = target.closest('.x');
    div.append('<div class="mask">mask</div>');
    setTimeout(function(){
        $('.mask', div).remove();
    }, 2500);
});

.ct {
    padding: 10px;
}

.x {
    height: 50px;
    margin-bottom: 10px;
    border: 1px solid lightgrey;
    position: relative;
}

.mask {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: .5;
    background-color: lightblue;
}

デモ：フィドル

于 2013-02-08T02:59:39.950 に答える