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

Question

我想根据具有类似名称的类的文本输入来操作 div。

例如，如果输入名为 foo1，我希望对 div1 进行操作，如果输入为 foo2，我希望对 div2 进行操作。

这是我正在使用的代码 sn-p：

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')
        }
    })
})

演示：Fiddle

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