Question

说我有20个这样的div：

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

和20 inpute：

<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();
 });

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

2 个答案: