我在同一页面上有 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);
}
})
我希望每个按钮根据文本长度设置自己的正面和背面宽度,并且在鼠标事件上独立运行
最佳答案
问题是您的回调上下文和您定位内部元素的方式之间没有关系。
$(".LIbtnWrapper").each(function(){
var frontW = $(".LIbtnFront h1").width(),
选择器不知道您的意思是正在迭代的元素中的h1
- 您使用的是通用选择器,因此它只会使用宽度它在 DOM 中找到的第一个与选择器匹配的元素。
相反,请将选择器与回调上下文紧密耦合。
$(".LIbtnWrapper").each(function(){
var frontW = $(this).find("h1").width(), //<-- h1 inside current iterator element
关于javascript - 如何使同一按钮的不同实例独立响应鼠标事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57762456/