Question

我试图根据鼠标位置向一组div添加一个类，最终的结果将是一个看着光标的人的墙......

我已经写了一些我认为应该工作的东西，我可以到addClass，但它非常错，似乎只添加了一次类而不是经常检查鼠标位置。谁能看到我出错的地方？

this.setImageDirection = function(){
    if(mouseX >= this.imageLeft && mouseX <= this.imageRight && mouseY <= this.imageTop){
        $(this).removeClass();
        $(this).addClass("up");
    } else if(mouseX < this.imageLeft && mouseY < this.imageTop){
      $(this).removeClass();
       $("."+this.className+">.head-image").addClass("up-left");
    } else if(mouseX <= this.imageLeft && mouseY >= this.imageTop && mouseY <= this.imageBottom){
        $(this).removeClass();
       $(this).addClass("left");
    } else if(mouseX < this.imageLeft && mouseY > this.imageBottom){
        $(this).removeClass();
        $(this).addClass("down-left");
    } else if(mouseX >= this.imageLeft && mouseX <= this.imageRight && mouseY >= this.imageBottom){
        $(this).removeClass();
        $(this).addClass("down");
    } else if(mouseX > this.imageRight && mouseY > this.imageBottom){
        $(this).removeClass();
        $(this).addClass("down-right");
    } else if(mouseX >= this.imageRight && mouseY >= this.imageTop && mouseY <= this.imageBottom){
        $(this).removeClass();
        $(this).addClass("right");
    } else (mouseX > this.imageRight && mouseY < this.imageTop){
        $(this).removeClass();
        $(this).addClass("up-right");
    } 
};

工作演示

https://jsfiddle.net/cppsh7y9/

Answer 1

您的代码无效。见这一行：

} else (mouseX > this.imageRight && mouseY < this.imageTop){

应该是：

} else if(mouseX > this.imageRight && mouseY < this.imageTop){

Answer 2

您尝试使用$(this)引用jquery元素，但this不是元素，它是HeadImage'类'的实例，因此jquery方法不是不去上班了。您需要在实例化时保存对元素的引用，并从中添加/删除css类。

例如，可能是这样的：

function HeadImage(className){
   this.element = $('.' + className);
   this.className = className;
   /* rest of the function ... */
}

然后在setImageDirection方法中：

this.setImageDirection = function(){
    if(mouseX >= this.imageLeft && mouseX <= this.imageRight && mouseY <= this.imageTop){
        this.element.removeClass();
        this.element.addClass("up");
    }
    /* ... */
}

根据鼠标位置添加Css类

2 个答案: