如何使同一按钮的不同实例独立响应鼠标事件

Question

我在同一页面上有2个具有相同html结构的按钮。 我有一些js代码来设置宽度，具体取决于按钮文本的文本长度。 我需要js代码来影响每个单独的按钮。

请在此处查看codepen： https ：//codepen.io/gianpiero-di-lullo/pen/gOYxoVr

我已经将它们插入each（）循环中

$(".LIbtnWrapper").each(function(){

    var frontW = $(".LIbtnFront h1").width(),
      frontH = $(".LIbtnFront h1").height(),
      backW = $(".LIbtnBack h1").width(),
      backH = $(".LIbtnBack h1").height();

    if(frontW > backW) {
      $(".LIbtnBack h1").width(frontW);
    } else {
       $(".LIbtnFront h1").width(backW);
    }
})

我希望每个按钮都可以根据其文本长度设置自己的frontFace和backface宽度，并且在发生鼠标事件时也可以独立运行

Answer 1

问题在于回调上下文和内部元素的定位方式之间没有关系。

$(".LIbtnWrapper").each(function(){
    var frontW = $(".LIbtnFront h1").width(),

选择不知道你指的是h1的元素上迭代 -您使用的是一般的选择，所以它只是用它发现在选择相匹配的DOM第一个的宽度。

而是将选择器紧密耦合到回调上下文。

$(".LIbtnWrapper").each(function(){
    var frontW = $(this).find("h1").width(), //<-- h1 inside current iterator element

Answer 2

您可以在每个变量内使用$(this)选择处理元素，并使用find()选择子级：

var a = $(".LIbtnWrapper");
$.each(a,function(){
    var front = $(this).find(".LIbtnFront").find("h1");
    var back = $(this).find(".LIbtnBack ").find("h1");

    var frontW = front.width(),
      frontH = front.height(),
      backW = back.width(),
      backH = back.height();

    if(frontW > backW) {
      back.width(frontW);
    } else {
       front.width(backW);
    }
})

Answer 3

这是关于上下文的，每个element都是.LIbtnWrapper上下文。 因此，您必须从按钮的子元素中找到子元素。

有关上下文的更多信息， 请参见https://stackoverflow.com/a/16422612/125981

 $(".LIbtnWrapper").each(function(index, element) { let bf = $(element).find(".LIbtnFront").find("h1"); let bb = $(element).find(".LIbtnBack").find("h1"); let frontW = bf.width(), frontH = bf.height(), backW = bb.width(), backH = bb.height(); console.log(frontW, frontH, backW, backH); if (frontW > backW) { bb.width(frontW); } else { bf.width(backW); } }); TweenLite.set(".LIbtnWrapper", { perspective: 1000 }); TweenLite.set(".LIbtn", { transformStyle: "preserve-3d" }); TweenLite.set(".LIbtnBack", { rotationX: -90, transformOrigin: "50% top", y: "100%" }); TweenLite.set([".LIbtnBack", ".LIbtnFront"], { backfaceVisibility: "hidden" }); $(".LIbtnWrapper").hover( function() { TweenLite.to($(this).find(".LIbtn"), .3, { rotationX: 90, ease: Power4.easeOut }); }, function() { TweenLite.to($(this).find(".LIbtn"), .5, { rotationX: 0, ease: Power4.easeOut }); } ); $(".LIbtnWrapper") .mouseup(function() { TweenLite.to($(this), .1, { transformOrigin: "center", scale: "1" }); $(".LIbtnFace h1").css({ color: "#fff" }); }) .mousedown(function() { TweenLite.to($(this), .04, { transformOrigin: "center", scale: ".96" }); $(".LIbtnFace h1").css({ color: "#00B1A7" }); }); 

 body { background-color: black; margin: 20px; font-family: Arial, sans-serif; padding: 20px 0px } .container { width: 80%; display: flex } .LIbtnWrapper { position: relative; float: left; margin: auto; cursor: pointer; -webkit-font-smoothing: antialiased; } .LIbtnFace { position: absolute; overflow: hidden; } .LIbtnFront, .LIbtnBack { background-color: rgba(0 0 0 0); } .LIbtn-large { font-size: 30px; } .LIbtn-medium { font-size: 20px; } .LIbtn-small { font-size: 10px; } .LIbtnFace h1 { margin: auto; padding: 15px; border: solid 6px #fff; color: white; white-space: nowrap; text-align: center; } .LIbtnFace.LIbtnBack h1 { border-color: #00B1A7; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script> <div class="container"> <div class="LIbtnWrapper"> <div class="LIbtn"> <div class="LIbtnFace LIbtnFront"> <h1 class="LIbtn-large">FRONT</h1> </div> <div class="LIbtnFace LIbtnBack"> <h1 class="LIbtn-large">THIS IS THE BACK</h1> </div> </div> </div> <div class="LIbtnWrapper"> <div class="LIbtn"> <div class="LIbtnFace LIbtnFront"> <h1 class="LIbtn-large">ANOTHER FRONT</h1> </div> <div class="LIbtnFace LIbtnBack"> <h1 class="LIbtn-large">BACK</h1> </div> </div> </div> </div> 

Answer 4

jQuery的.each两个参数： index和element

$('.LIbtnWrapper').each(function(index, element){
    // log the current element in this iteration
    console.log('the current element: ', element);

    // get child element with context of this/element
    var thisH1 = $('.LIbtnFront h1', element);
    console.log('the child h1 of the current element', thisH1);
});

如api示例所示，这是访问当前元素及其子元素的“ jQuery”方式。