Question

如果我动态生成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>

Answer 1

这可能更惯用：

$('.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个子伪装选择器，因此应该更高效。我觉得它看起来好一点，但这只是个人品味......

Answer 2

由于<input />实际上不是像div这样的容器，所以我怀疑javascript可以用于在其中插入任何内容。这只是猜测，但也许在硬编码时，浏览器会对您进行更正并将图像放在<input />之后。

校正：

我之前说过要附加到输入的父级，但输入共享同一个父级。而是在每次输入后使用after（）来放置图像。

$('inputBox').after('my html with image');

Img标签在硬编码时有效，但在通过javascript动态插入时无效

2 个答案: