javascript - 我可以自动生成一个对不同元素执行相同操作的 jquery block 吗？

Question

为了简单起见，假设我有一个元素列表“#a1，a2，a3，a4 ...”和另一个列表“#b1，b2，b3，b4 ...”。我希望在单击 #a1 时显示 #b1，在单击 #a2 时显示 #b2 > 等等。

我可以写:

$("#a1").click(function() {
  $("b1).show();
});
$("#a2").click(function() {
  $("b2).show();
});
...

等等。但如果列表变得更长，代码就会变得很多。

有没有办法自动生成 jQuery？这是一些非常粗糙的 Rails-y 伪代码来说明我想要做什么:

for (ids a1 - a99).each do |id|
  $("#a[id]").click(function() {
    $("#b[id]).show();
  });
end

Answer 1

不要添加 ID，而是添加类。并使用以下方案

$( ".classA" ).click( function() {
    // get index of clicked element among elements with classA
    var index = $( ".classA" ).index( this );  
    // show element from classB with same index as clicked element
    $( ".classB" ).eq( index ).show();  
} );

一个简单的 fiddle https://jsfiddle.net/xjseca5d/