jquery - 如何使用 jquery 每个方法发布每个图像的值？

Question

我有html代码：

<div>
  <span class="image" id="img-1"></span>
  <span id="src-1">img-src-1</span>
  <span id="cmd-1">img-cmd-1</span>
  <span id="h1-1">img-h1-1</span>
  <span id="h2-1">img-h2-1>
</div>

<div>
  <span class="image" id="img-2"></span>
  <span id="src-2">img-src-2</span>
  <span id="cmd-2">img-cmd-2</span>
  <span id="h1-2">img-h1-2</span>
  <span id="h2-2">img-h2-2>
</div>

和其他递增 div，如 img-3、img-4、img-5 ..... 具有相关值

这是我的 javascript：

$('.image').each(function() {
  $.post("../../includes/processes/show-images.php", {
    width : $(this).parent().width(),
    img_src : $(this).next().text(),
    cmd : $(this).next().next().text(),
    h1 : $(this).next().next().next().text(),
    h2 : $(this).next().next().next().next().text()
  },
  function(response){
    $(this).parent().html(response);
  });
});
return false;

我想为每个“.image”元素发布其值并在“.image”.parent() 中返回响应，但我的代码不起作用。:-(

有人可以帮我吗？

Answer 1

this的回调函数上下文中的关键字$.post不引用单击的元素，缓存对象：

$('.image').each(function() {
   var $this = $(this);
   $.post("../../includes/processes/show-images.php", {
    // ...
   }, function(response){
       $this.parent().html(response);
   });
});

你也可以使用.siblings()and方法而不是多次.eq()调用方法：.next()

$('.image').each(function() {
      var $this = $(this),
          $siblings = $this.siblings();
      $.post("../../includes/processes/show-images.php", {
          width   :  $this.parent().width(),
          img_src :  $siblings.eq(0).text(),
          cmd     :  $siblings.eq(1).text(),
          // ...
       }, function(response){
           $this.parent().html(response);
       });
});