如何将“点击时”的一系列 javascript (jQuery) 按钮转换为循环？答案

【问题标题】：How do you convert a series of javascript (jQuery) button "on clicks" into a loop?如何将“点击时”的一系列 javascript (jQuery) 按钮转换为循环？
【发布时间】：2013-06-09 04:13:07
【问题描述】：

我有一系列按钮（其中 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;
      }

显然，这是非常低效的。如何将其放入循环中？

【问题讨论】：

你几乎可以给所有的按钮一个类，将单击绑定到类，然后读取数据值并相应地设置高度。

标签： javascript jquery loops optimization

【解决方案1】：

你为什么不也给他们上一堂课，像这样：

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

     LiftHeight = this.id;

});

【讨论】：

@SheikhHeera：在 HTML5 中有效。
@Blender，它在 HTML5 之前也可以工作（但无效），在 chrome 中测试。

【解决方案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();
});

【讨论】：