2010-02-05 50 views
0

我需要帮助我是jQuery的新手,我想在我的一个网页中实现jQuery。 我也有一个窗体有四个文本框。我有两个div标签之一,另一个即我的代码结构是按以下方式如何为以下问题编写jQuery?

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

我只是想用jQuery的帮助,

  1. 在文件准备第一张图片应该是可见出尽的四个<img>和其余三个<img>应该隐藏在内部div标记和集中在第一个文本框上的光标之间。
  2. 现在当焦​​点聚集到第二个文本框时,当前可见的<img>应该隐藏,只有第二个<img>应该可见。
  3. 当焦点聚集到第三个文本框时,当前可见的<img>应该隐藏,只有第三个应该可见。
  4. 这样第四个<img>应该是可见的,当控制转到第四个文本框时。

整体而言,当焦点转到任何文本框时,与其相关的<img>应该是可见的,其余三个<img>应该被隐藏。

因此,请帮助做上述jQuery代码,除了上面提到的映像外,在执行以下功能时不会影响同一页上的其他图像。

等待你的回复,伙计们!

+2

,如果你把你的输入框的HTML过这将帮助格的人。 – rochal 2010-02-05 11:46:51

+2

为什么不先尝试一下自己,然后再回来一些具体的问题。你会更好地学习jQuery。 – 2010-02-05 11:47:08

+0

我在布局中看不到任何文本框 – 2010-02-05 11:47:27

回答

2

试试像我一样here


第一张图片(twitter)不会根据您的要求更改。受影响的唯一图像是在具有类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

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

谢谢朋友的回复。您的解决方案对我来说非常有用。再次感谢! – 2010-02-05 12:44:19

0

的HTML可能是这样的:

<div> 
    <textarea class="first"></textarea> 
    <textarea class="second"></textarea> 
    <textarea class="third"></textarea> 
    <textarea class="forth"></textarea> 
</div> 
<div class="images"> 
    <div> 
     <img class="first" src=".." /> 
     <img class="second" src=".." /> 
     <img class="third" src=".." /> 
     <img class="forth" src=".." /> 
    </div> 
</div> 

和jQuery的:

$(document).ready(function() { 
    $(".images img").hide(); 
    $("img.first").show(); 
    $("textarea").focus(function() { 
     $(".image img").hide(); 
     $("img."+$(this).attr("class")).show(); 
    }); 
}) 

与问题将是,你不能其他类的文本域和图像。如果你是在需要这样做,你就必须检查是否有某一类像

if ($(this).hasClass("first")) { 
    $("img.first").show(); 
} else if ... 
+0

谢谢朋友的回复。您的解决方案对我来说非常有用。 再次感谢! – 2010-02-05 12:43:59