Question

我是jQuery的新手，到目前为止我无法弄清楚发生了什么。我正在尝试使用jquery进行表单验证，其中我使用CSS visibility进行“tick-mark”，并根据文本框中输入的内容隐藏/显示“交叉标记”。我希望单独对每个文本框进行此操作，但每当我在第2或第3个文本框中键入内容时，“tick-mark”和“cross-mark”将仅显示第1个文本框。这是我的代码：

#tick{
position: relative;
top: 4px;
display: inline-block;
height: 20px;
width: 20px;
background-image: url(Images/tick.jpg);
background-size: 20px 20px;
visibility: hidden; }

#cross{
position: relative;
top: 4px;
display: inline-block;
height: 20px;
width: 20px;
background-image: url(Images/cross.jpg);
background-size: 20px 20px;
visibility: hidden; }

CSS代码

<b>Full Name : </b><input type="text" name="fullname" id="fname" /><div id="tick"></div<div id="cross"></div><br>
<b>Username : </b><input type="text" name="user" id="user" /><div id="tick"></div><div id="cross"></div><br>
<b>E-mail address : </b><input type="text" name="email" id="email" size="20" /><div id="tick"></div><div id="cross"></div><br>
<b>Postal Code : </b><input type="text" name="postcode" id="postcode" size="6"><div id="tick"></div><div id="cross"></div>

HTML代码

$(document).ready(function() {
 $("#fname").keyup(function() {
if (/^[a-zA-Z0-9 ]+$/.test($(this).val()) && $(this).val().trim() !== "") {
  //$(this).css("border-color", "#00E600");
  $("#tick").css("visibility", "visible");
  $("#cross").css("visibility", "hidden");
} else {
  //$(this).css("border-color", "red");
  $("#tick").css("visibility", "hidden");
  $("#cross").css("visibility", "visible");
}});
  $("#user").keyup(function() {
if (/^[a-zA-Z0-9 ]+$/.test($(this).val()) && $(this).val().trim() !== "") {
 $("#tick").css("visibility", "visible");
  $("#cross").css("visibility", "hidden");
} else {
  $("#tick").css("visibility", "hidden");
  $("#cross").css("visibility", "visible");
}});
  $("#email").keyup(function() {
if (/^([a-zA-Z0-9_\-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/.test($(this).val()) && $(this).val().trim() !== "") {
  $("#tick").css("visibility", "visible");
  $("#cross").css("visibility", "hidden");
} else {
  $("#tick").css("visibility", "hidden");
  $("#cross").css("visibility", "visible");
}});
  $("#postcode").keyup(function() {
if (/^(?:\+\d{1,3}|0\d{1,3}|00\d{1,2})?(?:\s?\(\d+\))?(?:[-\/\s.]|\d)+$/.test($(this).val()) && $(this).val().trim() !== "") {
  $("#tick").css("visibility", "visible");
  $("#cross").css("visibility", "hidden");
} else {
  $("#tick").css("visibility", "hidden");
  $("#cross").css("visibility", "visible");
}});
 })

jQuery代码

任何想法我该如何解决？任何想法都会有所帮助！ TNX。

Answer 1

DOM元素ID应该是唯一的。请改用类。例如，

$(".tick").css("visibility", "hidden");
$(".cross").css("visibility", "visible");

将隐藏所有包含班级tick的元素，并且cross将可见。

加法：

仅显示fullname字段的刻度或十字，我建议

<input type="text" name="fullname" id="fname" /><div id="tick_fname"></div<div id="cross_fname">

使用jQuery，

$("#fname").keyup(function() {
    if (/^[a-zA-Z0-9 ]+$/.test($(this).val()) && $(this).val().trim() !== "") {
    $("#tick_fname").css("visibility", "visible");
    $("#cross_fname").css("visibility", "hidden");
} else {
    $("#tick_fname").css("visibility", "hidden");
    $("#cross_fname").css("visibility", "visible");
}});

您可以对其他输入字段重复此操作。您是否考虑将.show()和.hide()切换为可见度？

Answer 2

您正在使用ID，这意味着分配了ID的元素应该是唯一的。在你的情况下，他们不是。尝试为每个框添加唯一标识符，然后它应该可以工作。

Answer 3

我误解了你的问题。如果你想选择特定的项目，他们需要有一些属性，id，类或其他东西来使每个#tick独一无二。

当您使用＆＃39;＃＆＃39;在您的JQuery选择器中，您只获得一个元素。这是因为id应该是唯一的。

话虽如此，如果不是使用：

$("#tick").css("visibility", "visible");

您使用：

$('[id="tick"]').css("visibility", "visible");

JQuery选择将返回所有id为＆＃34; tick＆＃34;的元素，并且.css（）将应用于具有该id的所有元素。

这里有一个有效的例子： http://jsbin.com/dinejahe/1/edit?html,js,output

Answer 4

好的，我找到了解决方案。这对我有用。我刚为不同的文本框分配了不同的ID，但对所有文本框使用了相同的两个类.tick和.cross。这使我的问题得以解决。

$(document).ready(function() {
$("#fname").keyup(function() {
if (/^[a-zA-Z0-9 ]+$/.test($(this).val()) && $(this).val().trim() !== "") {
$("#t1").css("visibility", "visible");
$("#c1").css("visibility", "hidden");
} else {
$("#t1").css("visibility", "hidden");
$("#c1").css("visibility", "visible");
}});
})

jQuery代码

<b>Full Name : </b><input type="text" name="fullname" id="fname" /><div id="t1" class="tick"></div<div id="c1" class="cross"></div><br>

HTML代码

Tnx向所有人提供了一个亮点。

使用jquery隐藏/显示多个div元素

4 个答案: