将 "live" css 和 jquery 独立应用于许多具有相同 class 的标签

Question

我的舞台上有 8 个学生与鼠标光标交互移动。我无法弄清楚如何将 css 独立应用于每个。有人可以帮我解决这个问题吗？

这是代码

jQuery(function($){

    /*I have 8 pupils in total*/
    $("body").mousemove(function(event) {
        var eye = $(".pupil");
        var x = (eye.offset().left) + (eye.width() / 2);
        var y = (eye.offset().top) + (eye.height() / 2);
        var rad = Math.atan2(event.pageX - x, event.pageY - y);
        var rot = (rad * (180 / Math.PI) * -1) + 180;
        

        /*I can't figure out how to fix the -for each-*/
        $(eye).each(function() {
            $(this).css({ 'transform': 'rotate(' + rot + 'deg)'});
        });

    });
});

这是 jsFiddle：https://jsfiddle.net/NickBil/qaspfk1L/2/

Answer 1

jquery有助于在集合或列表的基础上思考。你的直觉是对的，但你的应用有点不正确。所以而不是

jQuery(function($){

  /*I have 8 pupils in total*/
  $("body").mousemove(function(event) {
    var eye = $(".pupil");
    var x = (eye.offset().left) + (eye.width() / 2);
    var y = (eye.offset().top) + (eye.height() / 2);
    var rad = Math.atan2(event.pageX - x, event.pageY - y);
    var rot = (rad * (180 / Math.PI) * -1) + 180;


    /*I can't understand how to fix the -for each-*/
    $(eye).each(function() {
      $(this).css({ 'transform': 'rotate(' + rot + 'deg)'});
    });

  });
});

多尝试这样

jQuery(function($){

        /*I have 8 pupils in total*/
        $("body").mousemove(function(event) {
        
            $(".pupil").each(function() {
              var eye = $(this);
              var x = (eye.offset().left) + (eye.width() / 2);
              var y = (eye.offset().top) + (eye.height() / 2);
              var rad = Math.atan2(event.pageX - x, event.pageY - y);
              var rot = (rad * (180 / Math.PI) * -1) + 180;
            
              $(this).css({ 'transform': 'rotate(' + rot + 'deg)'});

        });
    });    
});

将 "live" css 和 jquery 独立应用于许多具有相同 class 的标签

Apply "live" css with jquery to many tags with same class indepedently

jquery

css

rotation

each

mousemove