Question

如何显示最接近输入框的div（带有类名）？

我有几个输入框，所以我只需要显示特定的输入框。

在我的例子中，我想在输入上方显示一个div框（显示输入框有错误的内容，即Numbers而不是Letters）如果输入框有字母，div必须再次隐藏。

所以它应该是一个正常的错误报告。

我的守则如下：

function calculate(){

var regex = new RegExp(/[~`!#$%\^&*+=\-\[\]\\';,/{}|\\":<>\?()]/);
var letter = /[a-zA-Z ]+/;

error1 = false;
error2 = false;
 error3 = false;

 var input = ['ID1','ID2'];
 var element;

 for(i=0;i <element.length; i++{
 element = document.getElementById(input[i]);

   if(regex.test(element.value) && letter.test(element.value)){
  element.style.border = '4px solid red';

 //Here's where i'm stuck
 //i'm trying to SHOW the previous Div with class(Errorreport) if the input is wrong 

 //$(element).prev('.Errorreport').show(); doesn't work

   }
   }

}

Answer 1

由于已经有答案讨论.closest I的使用;我将采取不同的方法并建议您删除所有这些不必要的<div>元素，并专注于您想要实现的目标。当用户在其中一个输入中键入错误时，您希望显示错误消息。

您最好使用跨度或标签，这些是经常用于显示表单错误的元素。

所以你想要一种方法来选择所有输入。所有这些都有一个.form-control类，所以你可以使用jQuery：

$('.form-control')

关注适合您需求的change或blur事件，并使用jQuery .parent()和.find()查找错误消息并进行显示。

我将很多代码更改为更清晰，更具描述性：

https://jsfiddle.net/uf72taeu/2/

Answer 2

你的期望是什么，只要条件改变。默认情况下，我做到了。

＆＃13;

		function calculate(element) {

			var regex = new RegExp(/[~`!#$%\^&*+=\-\[\]\\';,/{}|\\":<>\?()]/);
			var letter = /[a-zA-Z ]+/;

			    var inputBox = $(element);//$('#'+input[i]);

			    if (true/* regex.test(element.value) && letter.test(element.value) */)
			    {
			        var par = inputBox.parent(); // will return enclosed div   
			        par = par.parent();// will return div with class 'row'   
			        var errReport = par.prev(); // will return previous div, which is div with class 'row Errorreport'
			        
			        // do whatever in errReport
			        errReport.css("display", "block");
			        inputBox.css("border", "4px solid red");
			    }
// 			}

		}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row Errorreport" style="display: none;">
		<div>Error id 1</div>
	</div>
	<div class="row">
		<div>
			<input class="autoausgabe form-control " id="ID1"
				onChange="calculate(this);">
		</div>
	</div>
	<div class="row Errorreport" style="display: none;">
		<div>Error id 2</div>
	</div>
	<div class="row">
		<div>
			<input class="autoausgabe form-control " id="ID2"
				onChange="calculate(this);">
		</div>
	</div>

＆＃13;

以前的div显示为内联

2 个答案: