Question

我正在使用DragdealerJS触发多个动作并需要最后一个动作（当x小于0.00001时）使个别div变为蓝色。我知道这是某种绑定问题，但过去几个小时我一直无法解决问题。有谁知道如何解决这个问题？谢谢你的帮助。

$(function() {
    new Dragdealer('demo-simple-slider', {
        x: 0.5,
        animationCallback: function(x, y) {
            if (x < 0.00001) {
                $(this).css('background-color', 'blue');
            } else if (x < 0.3) {
                $(".dragdealer").css('background-color', '#00cf48');
                $(".dragdealer").addClass('dragEdit');
            } else if (x > 0.99999) {
                $('.dragdealer').css('background-color', 'red');
                $('.dragdealer').parent().slideUp("slow");
            } else if (x > 0.7) {
                $('.dragdealer').css('background-color', 'red');
                $('.dragdealer').addClass('dragTrash');

            } else {
                $('.dragdealer').css('background-color', 'white');
                $('.dragdealer').removeClass('dragTrash');
                $('.dragdealer').removeClass('dragEdit');
            }
        }
     });
});

如果HTML有帮助，请点击此处。

<div id="demo-simple-slider" class="dragdealer">
    Scene
    <div class="handle red-bar"></div>
</div>

Answer 1

发现问题，这是一个范围界定。我还没有完全理解范围，但它开始有意义。如果有人有任何好的资源来学习更多关于范围的事情，我很乐意看到它们。

$(function() {
  new Dragdealer('demo-simple-slider', {
      x: 0.5,
      animationCallback: function(x, y) {
          self = this;

          if (x < 0.00001) {

              console.log(self.handle);
              $(self.handle).css('background-color', 'blue');
          } else if (x < 0.3) {
              $(".dragdealer").css('background-color', '#00cf48');
              $(".dragdealer").addClass('dragEdit');
          } else if (x > 0.99999) {
              $('.dragdealer').css('background-color', 'red');
              $('.dragdealer').parent().slideUp("slow");
          } else if (x > 0.7) {
              $('.dragdealer').css('background-color', 'red');
              $('.dragdealer').addClass('dragTrash');

          } else {
              $('.dragdealer').css('background-color', 'white');
              $('.dragdealer').removeClass('dragTrash');
              $('.dragdealer').removeClass('dragEdit');

          }
      }
  });
});

Answer 2

问题的原因是因为这个原因。在animationCallback函数this中指的是DragDealer 实例，但在您的情况下，您想要访问DragDealer 元素。

要访问它，您可以使用this.handle属性。

$（这）不使用DragDealerjs

2 个答案: