我正在尝试执行以下操作 --> 我有一个动态编号 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
是什么元素是,然后找到与 child / parent 等相关的输入。我的问题是如何覆盖“加载”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
与类(class) item_wrapper
.当我点击 updateProduct()
我如何覆盖那个 DIV
带有覆盖图和加载器图像?我尝试的一切似乎都是徒劳的,而且我开始认为这在简单领域是不可能的。我试过变得像检测 item_wrapper
一样复杂的位置和WIDTH
/HEIGHT
并定位 FIXED
DIV
克服它,但这似乎不是正确的解决方案,必须有更好的方法。
最佳答案
您可以使用以下 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;
}
这是一个 fiddle ,使用的东西与您所拥有的类似:http://jsfiddle.net/Jeff_Meadows/dyPMG/3/
关于jQuery 覆盖——不同 DIV 的相同代码,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14764790/