Отображение следующей ДИВ по щелчку

Question

Скажем, у меня есть следующий HTML-макет:

<div class="main"> 
    <div class="comment"> 
    <div class="info"> 
     <div class="data"> 
     <img src="image.png" class="image-click" /> 
     </div> 
    </div> 
    </div> 
    <div class="open-me"></div> 

    <div class="comment"> 
    <div class="info"> 
     <div class="data"> 
     <img src="image.png" class="image-click" /> 
     </div> 
    </div> 
    </div> 
    <div class="open-me"></div> 

    <div class="comment"> 
    <div class="info"> 
     <div class="data"> 
     <img src="image.png" class="image-click" /> 
     </div> 
    </div> 
    </div> 
    <div class="open-me"></div> 
</div> 

... etc ... 

Как бы сделать так, чтобы при нажатии на изображение в одном из comment классов, он показывает HTML в классе nextopen-me ?

Вот что я до сих пор:

$(document).ready(function() { 
    $(document).on("click", ".image-click", function() { 
    $.ajax({ 
     url: 'show_html.php', 
     type: "POST", 
     success: function() { 
     $(this).find(".open-me").html(); /* this is where I'm stuck */ 
     } 
    }); 
    }); 
}); 

Answer 1

this внутри вашего метода успеха AJAX не относится к щелкнутому элементу больше. Для этого мы можем установить контекст переменной this:

$(document).on("click", ".image-click", function() { 
    var self = $(this); 
    $.ajax({ 
     url: 'show_html.php', 
     type: "POST", 
     success: function(data) { 
      self.parents(".comment").next(".open-me").html(data); 
     } 
    }); 
}); 

Answer 2

Вы можете использовать это, чтобы получить доступ к родственному открытому меня. Кроме того, вы должны сохранить ссылку на $ (this) за пределами .ajax().

// outside the ajax function 
var that = $(this); 

// inside the ajax function 
that.parent(".comment").next("open-me").html(); 

Соответствующая документация jQuery о next().