如果我动态生成img标签，那么它们应该不会出现，但是如果我硬编码那里的值，则图像会显示出来。有谁知道这是为什么？
根据我的jQuery，每次使用类.inputBox
输入后应该插入2个图像标记HTML：
<form action="" method="post" id="myform">
<label for="FirstName">First Name</label>
<input type="text" class="inputBox" name="FirstName" id="firstName" />
<label for="LastName">Last Name</label>
<input type="password" class="inputBox" name="LastName" id="lastName" />
</form>
CSS：
.thumb {
visibility:hidden;
height:0;
width:0;
}
.thumbV {
visibility:visible;
height:30px;
width:30px;
float:right;
padding:0 15px 0 0;
}
.borderGreen {
border:solid 2px #24F706;
}
.borderRed {
border:solid 2px #FD0F0F;
}
jQuery的：
$(document).ready(function() {
//calls the addImages function which is below
addImages();
//when the input focus is blurred
$("#firstName").blur(function() {
//when the focus is blurred, the sendValue function is called
//with the value that is in the input box
sendValue($(this).val(), "name.php", "#up1", "#down1", "#firstName");
});
//when the input focus is blurred
$("#firstName").focus(function() {
//when the input gains focus, the sendValue function is called
//with the value that is in the input box
sendValue($(this).val(), "name.php", "#up1", "#down1", "#firstName");
});
$("#lastName").blur(function() {
sendValue($(this).val(), "name.php", "#up2", "#down2", "#lastName");
});
$("#lastName").focus(function() {
sendValue($(this).val(), "name.php", "#up2", "#down2", "#lastName");
});
//function to determine the number of input fields and append a number to the id of each
//in order to display the correct thumb when a field is blurred
function addImages() {
var numInputs = $("div").length;
for(var i = 1;i<=numInputs;i++) {
//insert the thumbs images after form elements.
$("<img src=\"Images/thumbs_up_48.png\" class=\"thumb\" id=\""+"up"+i+"\" />").appendTo(".inputBox:nth-child("+i+")");
$("<img src=\"Images/thumbs_down_48.png\" class=\"thumb\" id=\""+"down"+i+"\" />").appendTo(".inputBox:nth-child("+i+")");
}
}
//function that sends the input box value to the php script.
//the php script checks if the input box value is in the correct format
//and sends a variable of either true or false back to this function.
//this function takes that variable and either adds classes or removes classes to
//give the border a different color and the correct icon.
function sendValue(str, file, up, down, field) {
//calls the ajax.php file using the post method and passes the variable str
$.post(file, {sendValue: str},
//when the php script sends a variable back, this function compares the returned
//variable and makes certain <img> available and adds certain classes.
function(data) {
if(data.returnValue === true) {
$(down).removeClass('thumbV').addClass('thumb');
$(up).removeClass('thumb').addClass('thumbV');
$(field).removeClass('borderRed').addClass('borderGreen');
}
else if(data.returnValue === false) {
$(up).removeClass('thumbV').addClass('thumb');
$(down).removeClass('thumb').addClass('thumbV');
$(field).removeClass('borderGreen').addClass('borderRed');
}
else {
$(up).removeClass('thumbV').addClass('thumb');
$(down).removeClass('thumbV').addClass('thumb');
$(field).removeClass('borderRed');
}
}, "json");
}
});
这是我想要实现的输出。当用户在输入中键入内容时，会将其设置为要验证的PHP脚本。我已经使用了firebug来确保PHP脚本正常工作。如果它正确验证，其中一个类应改为thumbV，输入框也应该是.borderRed类或.borderGreen类。
<body>
<div id="container">
<div id="outer">
<div id="inner">
<div id="loginForm">
<h2>Login</h2>
<div class="tooltip"></div>
<form action="" method="post" id="myform">
<label for="FirstName">First Name</label>
<input type="text" class="inputBox" name="FirstName" title="First Name Here" id="firstName" />
<img src="Images/thumbs_up_48.png" id="up1" class="thumb" />
<img src="Images/thumbs_down_48.png" id="down1" class="thumb" />
<label for="LastName">Last Name</label>
<input type="password" class="inputBox" name="LastName" title="Must be at least 8 characters and contain letters and numbers" id="lastName" />
<img src="Images/thumbs_up_48.png" id="up2" class="thumb" />
<img src="Images/thumbs_down_48.png" id="down2" class="thumb" />
<label for="Username">Username</label>
<input type="text" class="inputBox" name="Username" title="Must be at least 8 characters long" id="username" />
<img src="Images/thumbs_up_48.png" id="up3" class="thumb" />
<img src="Images/thumbs_down_48.png" id="down3" class="thumb" />
<label for="Password">Password</label>
<input type="password" class="inputBox" name="Password" title="Must be at least 8 characters and contain letters and numbers" id="password" />
<img src="Images/thumbs_up_48.png" id="up4" class="thumb" />
<img src="Images/thumbs_down_48.png" id="down4" class="thumb" />
<label for="Email">Email Address</label>
<input type="text" class="inputBox" name="Email" title="Email Address Here" id="email" />
<img src="Images/thumbs_up_48.png" id="up5" class="thumb" />
<img src="Images/thumbs_down_48.png" id="down5" class="thumb" />
<button type="submit" name="Submit" id="submitButton">Submit</button>
<input type="hidden" name="Hidden" id="hidden" />
</form>
</div>
</div>
</div>
</div>
</body>
答案 0 :(得分：2)
这可能更惯用：
$('.inputBox').each(function(i) {
var fixedIndex = i + 1;
$('<img></img>').addClass('thumb')
.attr('id', 'up'+fixedIndex)
.attr('src', 'Images/thumbs_up_48.png')
.after(this);
$('<img></img>').addClass('thumb')
.attr('id', 'down'+fixedIndex)
.attr('src', 'Images/thumbs_down_48.png')
.after(this);
}
它避免使用第n个子伪装选择器，因此应该更高效。我觉得它看起来好一点，但这只是个人品味......
答案 1 :(得分：2)
由于<input />实际上不是像div这样的容器，所以我怀疑javascript可以用于在其中插入任何内容。这只是猜测，但也许在硬编码时，浏览器会对您进行更正并将图像放在<input />之后。
校正：
我之前说过要附加到输入的父级，但输入共享同一个父级。而是在每次输入后使用after（）来放置图像。
$('inputBox').after('my html with image');