jQuery的疊加 - 針對不同的DIV

我試圖做同樣的代碼如下 - >我DIV元素的動態數量。所有堆疊像這樣：jQuery的疊加 - 針對不同的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要麼DIV1，DIV2或DIV3給出我使用上面的代碼來確定我在哪個DIV？下面是每個DIV的基本結構：

<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 s的類item_wrapper。當我點擊updateProduct()我如何覆蓋那DIV與覆蓋和加載器圖像？我所嘗試的一切似乎都是徒勞的，而我開始認爲簡單的不可能。我已經嘗試過，甚至像檢測item_wrapper的位置和WIDTH/HEIGHT和定位FIXEDDIV一樣複雜，但這似乎不是正確的解決方案，必須有更好的方法。

來源

2013-02-08 Zak

您可以找到以下的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-08 03:08:45

這是非常接近我所需要的。非常感謝，它幫助我指出了正確的方向！ – Zak

您可以使用絕對定位來掩蓋元素。你可以增強下面給出的例子。

<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; 
}

演示：Fiddle

來源

2013-02-08 02:59:39

jQuery的疊加 - 針對不同的DIV

回答

相關問題