>我正在尝试调用父div 之外的类
$(document).on('click', '.delete_photo', function(event){
var del_id = $(this).attr('id');
$.ajax({
type:'POST',
cache: false,
url:'delete-photo.php',
data:'delete_id='+del_id,
beforeSend:function(){
$(event.target).closest('.photo-over').show();
},
success:function(data) {
$('.editor-photo').load(document.URL + ' .editor-photo-list');
}
});
});
这是我的 HTML
<div class="row editor-photo-list">
{foreach from=$row item=$image_file}
<div class="col-md-4" style="margin-bottom: 20px;">
<div class="photo-list">
<input id="{$image_file.id}" type='image' src='http://demo1.demaxglobal.com/content/uploads/editor-images/{$image_file.path}' value='Edit photo' onclick="return launchEditor('{$image_file.id}', 'http://demo1.demaxglobal.com/content/uploads/editor-images/{$image_file.path}');">
<div class="photo-over">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
</div>
<div class="col-md-12 photo-edit-option">
<div class="col-md-4 photo-btn">
<div id="{$image_file.path}" class="delete_photo"><img src="../content/themes/default/images/close-button.png">
</div>
</div>
<div class="col-md-4 photo-btn">
<input id="{$image_file.id}" type='image' src='../content/themes/default/images/photo-edit.png' value='Edit photo' onclick="return launchEditor('{$image_file.id}', 'http://demo1.demaxglobal.com/conten/uploads/editor-images/{$image_file.path}');">
</div>
<div class="col-md-4 photo-btn">
<div class="post_photo-submit" id="{$image_file.path}">
<img src="../content/themes/default/images/the-flash.png">
</div>
</div>
</div>
</div>
{/foreach}
</div>
代码已更新。希望这可以给你们更多的想法。
我想在单击div 删除照片时显示div 照片。我也尝试了jquery parent()和find()方法,但没有帮助。
有多个具有相同类名的div。如果我删除最接近的方法,则照片覆盖div 将显示在所有 DIV 上。
谢谢
我会在这行标记中添加一个函数类,它是每个项目的包装器; 对应于示例的第 3 行:
<div class="col-md-4 item-wrapper" style="margin-bottom: 20px;">
然后,您应该能够通过以下方式在回调中访问它:
$(event.target).parents('.item-wrapper').find('.photo-list).find('.photo-over').show()
另外,下次请花一些精力提供代码,我们可以通过粘贴到 JSFiddle 或代码笔等位置来实际运行这些代码。
由于您知道位置,因此您可以使用香草js执行此操作,并具有适当的路径:
Array.from(document.querySelectorAll(".delete_photo")).map(el => {
el.onclick = e => {
const phOver = el.parentElement.previousSibling.querySelector('.photo-over')
// make your Ajax request, then do `$(phOver).show()`
}
})
使用jQuery,它应该只是:
$(".delete_photo").click(function(e) {
const sec = $(this).parent().prev()
// make your Ajax request, then do `$(".photo-over", sec).show()`
})
parent()
、 prev()
和 find()
方法才能导航到所需的 .photo-over
元素。
$(event.target).parent().parent().prev().find('.photo-over')
导航到上一个.photo-over
元素。
这应该适合您:
$(document).on('click', '.delete_photo', function(event) {
var del_id = $(this).attr('id');
$.ajax({
type: 'POST',
cache: false,
url: 'delete-photo.php',
data: 'delete_id=' + del_id,
beforeSend: function() {
$(event.target).parent().parent().prev().find('.photo-over').show();
},
success: function(data) {
$('.editor-photo').load(document.URL + ' .editor-photo-list');
}
});
});