我需要帮助我是jQuery的新手,我想在我的一个网页中实现jQuery。 我也有一个有四个文本框的表格。我有两个div标签,即我的代码结构以下列方式
<div>
<div>
<img>
<img>
<img>
<img>
</div>
<div>
我只想做jquery的帮助
<img>
中可见,三个<img>
中的其余部分应隐藏在内部div标签和聚焦在第一个文本框上的光标之间。 <img>
应该被隐藏,只有第二个<img>
可见。<img>
应该被隐藏,只有第三个应该可见。<img>
应该是可见的。总体而言,当焦点转到任何文本框时,与其相关的<img>
应该是可见的,其余三个<img>
应该被隐藏。
所以请帮助我们执行上面的jQuery代码,该代码执行以下功能,除了上面提到的图像外,不会影响同一页面上的其他图像。
等待你的回复,伙计们!
答案 0 :(得分:2)
尝试像我做的here。
根据您的要求,第一张图片(twitter)不会改变。唯一受影响的图像是div中具有类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();
});
});
});
答案 1 :(得分: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();
});
})
问题就在于,你不能对textareas和图像进行其他类。如果您需要这样做,则必须检查某个类,如
if ($(this).hasClass("first")) {
$("img.first").show();
} else if ...