0


1

以下の問題に対してjQueryを作成するにはどうすればよいですか?

jQueryを初めて使用するときに助けが必要で、Webページの1つにjQueryを実装したい。 また、4つのテキストボックスがある1つのフォームがあります。 私は2つのdivタグをもう1つ持っています、つまり 私のコード構造は次のようになっています


私はjqueryの助けを借りてやりたいだけです

  1. ドキュメントの準備ができたら、最初のimgが4つの「 3つの残りの ''は、内側のdivタグとカーソルが最初のテキストボックスにフォーカスしている間に隠されるべきです。

  2. フォーカスが2番目のテキストボックスに移動すると、現在表示されている「 非表示になり、2番目の ''のみが表示されます。

  3. フォーカスが3番目のテキストボックスに移動すると、現在表示されている「 非表示で、3番目だけが表示されるはずです。

  4. このようにして、4番目の「 4番目のテキストボックス。

全体的に、テキストボックスのいずれかにフォーカスが移動すると、「それに関連する」が表示され、残りの3つが非表示になります。

したがって、上記の画像を除く同じページの他の画像に影響を与えることなく、次の機能を実行する上記のjQueryコードを実行するのに役立ちます。

返信を待っています、皆さん!

2 Answer


2


私がhttp://jsbin.com/ipuva3/3 [ここ]でやったようなことを試してください。

'' '' '

最初の画像(twitter)は、要件に応じて変更されません。 影響を受ける画像は、クラス「sample」を持つdiv内の画像のみです

HTML


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


htmlは次のようになります。


およびjquery:

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

それに伴う問題は、textareasとimagesに対して他のクラスを使用できないことです。 そうする必要がある場合は、次のような特定のクラスを確認する必要があります

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