如何为以下问题编写jQuery? [英] How can i write jQuery for below problem?

问题描述

我需要帮助，我是jQuery的新手，我想在我的网页之一中实现jQuery. 我也有一个包含四个文本框的表单.我有两个div标签，一个又一个，即我的代码结构如下:

I need help I am new to jQuery and i want to implement jQuery in one of my webpage. I also have one form having four text boxes. I have two div tags one in another i.e. my code structure is in following way

<div>
    <div>
        <img>
        <img>
        <img>
        <img>
    </div>
<div>

我只想借助jquery来做

I just want to do with the help of jquery that

1. 在准备就绪的文档中，第一个img应该在四个<img>中可见，而其余三个<img>应该隐藏在内部div标记和焦点在第一个文本框上的光标之间.
2. 现在，当焦点移至第二个文本框时，当前可见的<img>应该被隐藏，而只有第二个<img>应该可见.
3. 当焦点移至第三个文本框时，当前可见的<img>应该被隐藏，而只有第三个可见.
4. 这样，当控件转到第四个文本框时，第四个<img>应该是可见的.

1. On document ready the first img should be visible out of the four <img> and rest of the three <img> should be hidden between the inner div tag and the cursor focused on first textbox.
2. Now when focus gose to second textbox the current visible <img> should get hidden and only second <img> should be visible.
3. When focus gose to third textbox the current visible <img> should get hidden and only third should be visible.
4. In this way the fourth <img> should be visible when control goes to fourth text box.

总体上，当焦点移至任何文本框时，与之相关的<img>应该可见，其余三个<img>应该隐藏.

Overall when focus goes to any of the textbox the <img> related to it should be visible and the remaining three <img> should be hidden.

因此，请帮助执行上述jQuery代码，以执行以下功能，而不会影响除上述图像之外的同一页面上的其他图像.

So please help in doing above jQuery code which do the following functionality with out affecting other images on the same page except the imaged mentioned above.

伙计们，等待您的答复！

Waiting for your reply, guys!

推荐答案

尝试类似的操作这里.

根据您的要求，第一张图像(Twitter)不变.唯一受影响的图像是div中具有sample

The first image (twitter) does not change, as per your requirements. The only images that are affected are the ones in the div that has the class sample

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>

JavaScript

JavaScript

$(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();
        });
    });
});

这篇关于如何为以下问题编写jQuery?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！