javascript - 多くのIDを扱う

Question

フォーム内のすべての入力フィールドの文字カウンターを作成しています。これは、入力フィールドにフォーカスしたとき、そこから離れたとき、およびキーを押し終わったときのスクリプトです。

$(document).ready(function () {
    $("#in1").keyup(function () {
        $("#count1").text(50 - this.value.length);
    });
    $("#in1").focus(function () {
        $("#countainer1").show();
        $("#count1").text(50 - this.value.length);
    });
    $("#in1").blur(function () {
        $("#countainer1").hide();
    });
});

ここで動作することがわかります: http://jsfiddle.net/UQFD6/12/

質問は：

ID ごとにスクリプトを生成する必要がありますか?

つまり、コードは同じになりますが、異なる ID#input1に#countainer1適用#count1さ#input2れ#countainer2ます#count2。

IDの代わりにクラスを使用することを考えましたが、コンテナーを表示すると、書き込み中のフィールドのコンテナーだけではなく、そのクラスのすべてのコンテナーが表示されます。

score 1 · Accepted Answer

いいえ、の代わりにクラスを使用できます。たとえば、現在IDをin1、in2などに指定している要素にin#in1クラスを追加します。

$(".in").keyup(function () {

たとえばdata-id=1、現在の要素に関連付けられている、選択する必要のある要素に属性を使用できます。#in1

var id = $(this).data('id');
$(".count[id='" + id + "']").text(...);

score 0 · Accepted Answer

代わりにクラスを試すことができます。

$(document).ready(function () {
    $(".in").keyup(function () {
        $(this).siblings(".count").text(50 - this.value.length);
    }).focus(function () {
        $(".countainer").show();
        $(this).siblings(".count").text(50 - this.value.length);
    }).blur(function () {
        $(this).siblings(".countainer").hide();
    });
});

score 0 · Accepted Answer

私はこれをお勧めします：

$(document).ready(function () {
    $('input[id^=in]').each(function(){ // all inputs whose id starts with "in"
       var i = this.id.slice(2); // finds "32" from "in32"
        $(this).keyup(function () {
            $("#count"+i).text(50 - this.value.length);
        }).focus(function () { // let's chain
            $("#countainer"+i).show();
            $("#count"+i).text(50 - this.value.length);
        }).blur(function () {
            $("#countainer"+i).hide();
        });
    });
});

javascript - 多くのIDを扱う

3 に答える 3

Related

Reference