Jquery最接近父div之外的類的方法

Question

我正在嘗試調用父 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。

謝謝

Answer 1

既然知道了位置，就可以通過適當的路徑使用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()`
})

Answer 2

這足夠接近問題：$（event.target）.parent（）。siblings（）。find（'。photo-over'）。show（）;

Answer 3

我會在此標記行中添加一個函數類，它是每個項目的包裝； 對應於示例的第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或codepen之類的代碼中可以實際運行的代碼 。

Answer 4

您將需要使用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');
    }
  });
});