Тег img работает, когда жестко запрограммирован, но не когда динамически вставляется через JavaScript - PullRequest
Новая
       6

Тег img работает, когда жестко запрограммирован, но не когда динамически вставляется через JavaScript

3 голосов
/ 02 февраля 2010

Если я динамически сгенерирую теги img, они не будут отображаться, когда должны, но если я жестко закодирую значения в них, изображения появятся.Кто-нибудь знает, почему это так?

Согласно моему jQuery, после каждого ввода должно быть вставлено 2 тега изображения с классом .inputBox

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>

Ответы [ 2 ]

2 голосов
/ 02 февраля 2010

Поскольку <input /> на самом деле не контейнер как div, я почему-то сомневаюсь, что javascript может использоваться для вставки чего-либо внутри него. Это всего лишь предположение, но, возможно, когда оно жестко запрограммировано, браузер делает исправление для вас и размещает изображение после <input />.

Исправление:

Ранее я говорил добавить в родительский элемент ввода, но входные данные имеют одного и того же родителя. Вместо этого используйте after () для размещения изображений после каждого ввода. 

$('inputBox').after('my html with image');
2 голосов
/ 02 февраля 2010

Возможно, это более идиоматично: 

$('.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-го дочернего псевдо-селектора, поэтому должен быть более производительным. Я также думаю, что это выглядит немного лучше, но это только личный вкус ...

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...