[英]Jquery closest method for class outside parent div
我正在尝试调用父 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 上都会显示 photo-over div。
谢谢
既然知道了位置,就可以通过适当的路径使用vanilla 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()`
})
这足够接近问题:$(event.target).parent()。siblings()。find('。photo-over')。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');
}
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.