Py学习  »  Jquery

下面的问题如何编写jquery?

Param-Ganak • 5 年前 • 252 次点击  

我需要帮助我是jquery的新手,我想在我的一个网页上实现jquery。 我还有一个表单,有四个文本框。我有两个DIV标记,一个在另一个,即我的代码结构如下

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

我只想在jquery的帮助下

  1. 在文档就绪时,第一个IMG应在四个IMG中可见 <img> 剩下的三个 <IMG & GT; 应该隐藏在内部的DIV标记和焦点位于第一个文本框的光标之间。
  2. 现在,当焦点转到第二个文本框时,当前可见 <IMG & GT; 应该被隐藏,只有第二个 <IMG & GT; 应该是可见的。
  3. 当焦点转到第三个文本框时,当前可见 <IMG & GT; 应该是隐藏的,只有第三个是可见的。
  4. 这样第四个 <IMG & GT; 当控件转到第四个文本框时应可见。

总的来说,当焦点转到任何文本框时, <IMG & GT; 与之相关的应该是可见的,其余三个 <img> 应该隐藏。

因此,请帮助执行上述jquery代码,该代码执行以下功能,但不影响同一页上除上述图像以外的其他图像。

等着你的答复,伙计们!

Python社区是高质量的Python/Django开发社区
本文地址:http://www.python88.com/topic/30851
 
252 次点击  
文章 [ 2 ]  |  最新文章 5 年前
harpax
Reply   •   1 楼
harpax    14 年前

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 ...
Andreas Grech
Reply   •   2 楼
Andreas Grech    14 年前

像我一样尝试 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();
        });
    });
});