Question

我想知道是否有办法在父元素上使用.children，然后使用$（this）仅使用事件处理程序引用特定的子元素。像这样：或者在这里看笔：http://codepen.io/coralsea/pen/JoRrRG

 <div class="petals">
    <div class="petal-1">
    </div>
    <div class="petal-2">
    </div>
     <div class="petal-3">
    </div>
    <div class="petal-4">
    </div>
    <div class="petal-5">
    </div>
    <div class="petal-6">
    </div>
    <div class="petal-7">
    </div>
</div>

/

$(document).ready(function() {
  $('.petals').children().draggable()
  $(this).mouseup(function() {
  $(this).animate({
    backgroundColor: 'red',
    top: "+=50"
  }, 2000, function() {

  });
});
});

我能够通过为每个孩子添加一个课程并将其作为目标来完成工作：http://codepen.io/coralsea/pen/emdGmo 但似乎能够通过定位父母的子女来做到这一点会更有效率。

Answer 1

您可以通过链接命令。（删除$(this)部分）

$(document).ready(function() {
  $('.petals')
      .children()
      .draggable()
      .mouseup(function() {
        $(this).animate({
          backgroundColor: 'red',
          top: "+=50"
        }, 2000, function() {
          // Animation complete.
        });
  });
});

http://codepen.io/gpetrioli/pen/WbGZog

Answer 2

使用jQuery Ui的stop事件执行此操作的其他方式：

$(document).ready(function () {
    $('.petals').children().draggable({
        stop: function (event, ui) {
            $(this).animate({
                backgroundColor: 'red',
                top: "+=50"
            }, 2000, function () {
                // Animation complete.
            });
        }
    });
});

<强> CodePen link

如何将$（this）应用于单个子元素

2 个答案: