jquery - 如何在 jquery 的函数中选择相应的元素？

Question

说我有 20 个这样的 div：

   <div id="b1"></div>
   <div id="b2"></div>
   <div id="b3"></div>
   <div id="b4"></div>
...  

和 20 个输入：

<inpute id="in1"></inpute>
<inpute id="in2"></inpute>
<inpute id="in3"></inpute>
<inpute id="in4"></inpute>
...  

现在我想做这样的事情：

  $('#b1').click(function(){
    $('#in1').fadeIn();
  });
  $('#b2').click(function(){
    $('#in2').fadeIn();
  });
....

所以每个 div 都必须淡化相应的输入。我必须重复我的代码。有没有办法动态选择相应的元素？我想要一个功能

编辑：

看来我必须使用类。通过这样的事情：

$(this).index()

我可以得到点击的索引。所以我的代码：

$('.b').click(function(){
    $('.in('+ $(this).index() +')').FadeIn();
});

Answer 1

您可以获取元素的 ID 并替换b为in：

$('div[id^=b]').click(function(){
    $('#' + this.id.replace('b', 'in')).fadeIn();
});

或者如果两组元素的顺序相同，您可以通过索引选择相应的元素：

var $inputs = $('input[id^=in]'); // you really should use a class
var $divs = $('div[id^=b]'); // you really should use a class
$divs.click(function(){
    $inputs.eq($divs.index(this)).fadeIn();
});

Answer 2

尝试：

 $('[id^=b').click(function(){
  $('#in' + this.id.replace('b','')).fadeIn().siblings().fadeOut();
 });