jquery 位置发生碰撞。检测到碰撞时添加类

Question

我使用 jquery-ui 的自动完成框进行碰撞，以在输入上方或下方显示自动完成。我想要的是，如果检测到碰撞，则向自动完成元素添加一个类，这样我就可以自定义CSS(如果它位于上方与下方)。这看起来应该很简单，但我似乎想不出任何方法来实现它。

Answer 1

更好的解决方案是在回调中使用第二个参数。 来自 jQueryUi 文档:

The second provides feedback about the position and dimensions of both elements, as well as calculations to their relative position. Both target and element have these properties: element, left, top, width, height. In addition, there's horizontal, vertical and important, giving you twelve potential directions like { horizontal: "center", vertical: "left", important: "horizontal" }.

正如它所说，第二个参数中有一个水平和一个垂直属性，您可以使用它们来确定元素是否翻转。所以你可以写这样的东西:

$("#someId").dialog({
      position: {
      my: 'left top',
      at: 'right top',
      collision: 'flip flip',
      of: $('#' + someElementID),
      using: function (obj,info) {
          if (info.vertical != "top") {
              $(this).addClass("flipped");
          } else {
              $(this).removeClass("flipped");
          }
          if (info.horizontal != "left") {
              $(this).addClass("flipped");
          } else {
              $(this).removeClass("flipped");
          }
          $(this).css({
            left: obj.left + 'px',
            top: obj.top + 'px'
          });
      }
},