选择没有ID的具体DOM元素

Question

当我输入登录名或密码时，工具提示会显示一个或多个句子。 每个工具提示都有相同的z-index ，但是当我专注并且 时，我想将其更改为更高将它带回模糊事件，但我可能在工具提示中有10个输入和许多选项。是否可以在不使用工具提示ID的情况下编写函数？

$(document).ready(function() {

  $('input').focus(function() {
    $('div.tooltip').addClass("active");
  });

  $('input').blur(function() {
    $('div.tooltip').removeClass("active");
  });

  $('#login').keyup(function() {
    var th = document.getElementById('login').value;
    if (th.length < 6) {
      $('#result').css('display', 'inline');
      var ex = $("#too_short").text();
      if (!ex) {
        $('#result').append('<p id="too_short">Too short password.</p>');

      }
    } else {
      $("#too_short").remove();
    }

    if (th.contains('\'') || th.contains('\"') || th.contains('\\') || th.contains('\/')) {
      $('#result').css('display', 'inline');
      var en = $("#forb_char").text();
      if (!en) {
        $('#result').append('<p id="forb_char">Forbidden characters</p>');

      }
    } else {
      $("#forb_char").remove();
    }

  });

  $('#pwd').keyup(function() {
    var th = document.getElementById('pwd').value;
    if (th.length < 6) {
      $('#result1').css('display', 'inline');
      var ex = $("#too_short1").text();
      if (!ex) {
        $('#result1').append('<p id="too_short1">Too short password.</p>');

      }
    } else {
      $("#too_short1").remove();
    }

    if (th.contains('\'') || th.contains('\"') || th.contains('\\') || th.contains('\/')) {
      $('#result1').css('display', 'inline');
      var en = $("#forb_char1").text();
      if (!en) {
        $('#result1').append('<p id="forb_char1">Forbidden characters</p>');

      }
    } else {
      $("#forb_char1").remove();
    }

  });

});

	.tooltip {
	  position: absolute;
	  border: 2px solid red;
	  display: none;
	  margin-left: 250px;
	  background: blue;
	  z-index: 1;
	  color: white;
	}
	.active
}
z-index:999;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<form name="form" id="form" method="post">
  <div id="result" class="tooltip"></div>
  <span> Write login: </span> 
  <input id="login" name="login" type="text" />
  <br/>
  <div id="result1" class="tooltip"></div>
  <span> Write pwd: </span> 
  <input id="pwd" name="pwd" type="text" />
</form>
<!-- How to addClass active to proper div.tooltip? -->

Answer 1

这样的东西？ ：

http://jsfiddle.net/9n2db67u/22/

你的代码非常混乱。发布jsfiddle链接时尝试使用TidyUp ..

$('input').on('click', function () {
    $('.active').removeClass('active');
    $(this).prevAll('div').addClass('active'); //.css('z-index', '20000');
});