javascript - 单击时显示下一个 div

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 next open-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

您可以使用它来访问兄弟姐妹 open-me。此外，您应该在 .ajax() 之外保存对 $(this) 的引用。

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

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

jQuery 关于next()的文档是相关的。