使用递增的类名将类应用于类似命名的div

Question

我想使用一个类似命名的类来操作基于文本输入的div。

例如，如果输入名为foo1，我希望div1被操纵，如果输入名为foo2，我希望div2被操纵。

下面是我使用的代码片段:

var i = (i + 1);
$('.pI_nameText + (i) ').focus( function() {
    $(".nameLights + (i) ").addClass("lightOverlay"); });
$('.pI_nameText + (i) ').blur( function() {
    if ($(".pI_nameText + (i) ").val() == '') {
        console.log($(".pI_nameText + (i) ").val());
        $(".nameLights + (i) ").removeClass('lightOverlay')
    }
})

下面是这段代码的示例:http://jsfiddle.net/W99vQ/

我几乎在那里，我想，因为这工作没有递增，但不是与它，所以它应该是我使用的语法。

Answer 1

最好使用一个通用的类对元素进行分组，并将其用作选择器，如

<input class="pI_nameText name1"></input>
<div class="nameLights"></div>
<input class="pI_nameText name2"></input>
<div class="nameLights"></div>
<input class="pI_nameText name3"></input>
<div class="nameLights"></div>
<input class="pI_nameText name4"></input>
<div class="nameLights"></div>
<input class="pI_nameText name5"></input>
<div class="nameLights"></div>

然后

jQuery(function () {
    $('.pI_nameText').focus(function () {
        $(this).next().addClass("lightOverlay");
    }).blur(function () {
        if (this.value == '') {
            $(this).next().removeClass('lightOverlay')
        }
    })
})

演示:小提琴

Answer 2

您需要遍历所有元素，然后绑定处理程序。

for(var j = 1; true; j++)
{
  if($('pI_nameText' + i).length == 0)
  {
    break;
  }
  $('pI_nameText' + i).focus(function(){
    $(".nameLights + (i) ").addClass("lightOverlay"); 
  });
  $('.pI_nameText + (i) ').blur( function() {
    if ($(".pI_nameText + (i) ").val() == '') {
      console.log($(".pI_nameText + (i) ").val());
      $(".nameLights + (i) ").removeClass('lightOverlay');
  });
}

但是我强烈建议不要这样做!通过查看您的小提琴，如果您可以访问html，我可能会向pI_元素添加另一个类，如下所示:

<input class="pI_nameText1 anotherClass"></input>
<div class="nameLights1 anotherClass_Lights"></div>

然后将它们同时绑定。

$('.anotherClass').focus(function(){
  $(this).next('.anotherClass_Lights').addClass('lightOverlay');
});
$('.anotherClass').blur(function(){
  $(this).next('.anotherClass_Lights').removeClass('lightOverlay');
});