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

Question

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

请在此处查看代码笔: 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);
    }
})

我希望每个按钮根据文本长度设置自己的正面和背面宽度，并且在鼠标事件上独立运行

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