Question

我有一系列按钮（其中25个）用于设置Web应用程序中某些内容的高度。我知道这是一种奇怪的方式，但这是有原因的。 每个按钮的id等于它设置的高度，以英寸为单位，从0到24，它们都共享HeightButtons类。这是我到目前为止所做的，手动输入全部：

$('#0').click()(function() {
    LiftHeight = 0;
}$('#1').click()(function() {
    LiftHeight = 1;
}$('#2').click()(function() {
    LiftHeight = 2;
}$('#3').click()(function() {
    LiftHeight = 3;
}$('#4').click()(function() {
    LiftHeight = 4;
}$('#5').click()(function() {
    LiftHeight = 5;
}$('#6').click()(function() {
    LiftHeight = 6;
}$('#7').click()(function() {
    LiftHeight = 7;
}$('#8').click()(function() {
    LiftHeight = 8;
}$('#9').click()(function() {
    LiftHeight = 9;
}$('#10').click()(function() {
    LiftHeight = 10;
}$('#11').click()(function() {
    LiftHeight = 11;
}$('#12').click()(function() {
    LiftHeight = 12;
}$('#13').click()(function() {
    LiftHeight = 13;
}$('#14').click()(function() {
    LiftHeight = 14;
}$('#15').click()(function() {
    LiftHeight = 15;
}$('#16').click()(function() {
    LiftHeight = 16;
}$('#17').click()(function() {
    LiftHeight = 17;
}$('#18').click()(function() {
    LiftHeight = 18;
}$('#19').click()(function() {
    LiftHeight = 19;
}$('#20').click()(function() {
    LiftHeight = 20;
}$('#21').click()(function() {
    LiftHeight = 21;
}$('#22').click()(function() {
    LiftHeight = 22;
}$('#23').click()(function() {
    LiftHeight = 23;
}$('#24').click()(function() {
    LiftHeight = 24;
      }

显然，效率非常低。如何将其置于循环中？

Answer 1

为什么不给他们上课，如下：

$('.dynHeight').on('click', function() {

     LiftHeight = this.id;

});

Answer 2

根本不使用循环。给这些按钮一个类，可能是data-属性：

<button class="height-setter" data-lift-height="12">Click me</button>

然后将事件处理程序附加到它们：

var lift_height = 0;

$('.height-setter').click(function() {
    lift_height = $(this).data('lift-height');
});

或者，如果可能，请使用他们的订单：

<div class="buttons">
    <button>One</button>
    ...
</div>

和JS：

var lift_height = 0;

$('.buttons button').click(function() {
    lift_height = $(this).index();
});

如何将一系列javascript（jQuery）按钮“点击”转换为循环？

2 个答案: