Как выполнить следующую задачу с помощью jQuery?

Question

Следующий код предоставлен одним из пользователей и друзей в stackoverflow как решение для моей проблемы. HTML код

<img src="https://s3.amazonaws.com/twitter_production/a/1265328866/images/twitter_logo_header.png"/> 

<input type="text"/> 
<input type="text"/> 
<input type="text"/> 
<input type="text"/> 

<div class="sample"> 
    <img src="http://sstatic.net/so/img/logo.png"> 
    <img src="http://static.jquery.com/files/rocker/images/logo_jquery_215x53.gif"> 
    <img src="http://cacm.acm.org/images/logo.ACM.gif"> 
    <img src="http://static03.linkedin.com/img/logos/logo_linkedin_88x22.png"> 
</div> 

Jquery код

$(function() { 
    var textboxes = $("input:text"), //gets all the textboxes   
     images = $(".sample img"); //gets all the images 

    images.not(":first").hide(); //hide all of them except the first one 
    textboxes.each(function (i) { 
     var j = i; 
     $(this).focus(function() { 
      images.hide().eq(j).show(); 
     }); 
    }); 
}); 

Приведенный выше код показывает изображение, связанное с текстовым полем, которое имеет фокус и скрывает остальную часть всех трех изображений одновременно.

Вышеупомянутый процесс продолжается последовательно, что для первого текстового поля видно первое изображение, для второго текстового окна видно, что изображение видно таким образом. Теперь проблема заключается в том, что я хочу показать 1. Когда фокус попадает в первый текстовый блок, видно первое изображение 2. Когда фокус попадает во второй текстовый блок, отображается второе изображение 3. Когда фокус приходит в третье текстовое поле, я хочу второй изображение, как это видно таким образом после 4-го и пятого текстового поля, когда появляется шестое текстовое поле, третье изображение должно быть видимым.

QUE 1. Возможно ли показать изображение, как я хочу, но используя цикл, как в приведенном выше коде, и идентифицируя текстовое поле с помощью jquery? или я должен писать отдельные функции для каждого текстового поля?

Существует не только текстовые поля, но также группа переключателей, флажков и групп флажков между текстовыми полями, поэтому, когда фокус приходит к этим переключателям или выбирает поля или флажки, связанное изображение с они должны стать видимыми. так

Que 2. Как я могу различать изображения для вышеуказанного контроля?

Que 3. что следующая строка будет делать в коде и как его выполнить выполнение означает, какая функция выполняется сначала, а затем какая секунда таким образом? images.hide(). Eq (j) .show();

Пожалуйста, ответьте на вышеуказанные вопросы как можно глубже, потому что я новичок в jquery. и я хочу знать, как это работает Thank You

Answer 1

Мне сложно понять, что вы говорите, но если я правильно понял, у вас есть серия входов (вход, выбор, текстовое поле ...) серия изображений. Вы хотите управлять режимом отображения/скрытия изображений, в соответствии с которым фокус ввода.

Способ, которым вы можете решить это, - это отношение, которое программно задано в DOM между изображениями и входами. Прямо сейчас вы используете для этого порядок внешнего вида. Он может работать, но вам нужно будет запомнить за шесть месяцев во время обслуживания, чтобы уважать это невидимое правило.

Поэтому я бы предложил другой вариант, более семантический и читаемый: используя классы и идентификаторы. Входы и изображения, которые должны идти вместе, будут иметь общий идентификационный номер (например: <input id="input-5" type="text"/> для ваших входов, <img id="image-5" src="path.jpg"/> для ваших изображений, а затем восстановить селектор в вашей функции each() с использованием идентификационного номера.

jQuery бы что-то в подобных:

$(function() { 

$('.image').hide(); 

$('input').focus(function(){ 
    var parts= $(this).attr('id').split('-'); 
    var uId = parts[1]; 
    alert(uId); 
    // now, find the right image to show 
    $('.image').hide(); 
    $('#image-'+uId).show(); 

}); 
}); 

вы можете увидеть live example here (вы можете играть с ним here).

Сообщите мне, если я на правильном пути или если я полностью неправильно понял вашу потребность. Если я на правильном пути, мы сможем решить ваши оставшиеся проблемы, выполнив эту логику.