-2

jquery で次のバインディングを最小化するにはどうすればよいですか。

    var profileIdDefault = "Profile ID";
    var organisationIdDefault = "Competitor ID";
    var FromDateDefault = "From Date";
    var ToDateDefault = "To Date";


    $("#startDate").focus(function () {
        if ($(this).val() === FromDateDefault) {
            $(this).attr("value", "");
        }
    });
    $("#startDate").blur(function () {
        if ($(this).val() === '') {
            $(this).val(FromDateDefault);
        }
    });

    $("#endDate").focus(function () {
        if ($(this).val() === ToDateDefault) {
            $(this).attr("value", "");
        }
    });
    $("#endDate").blur(function () {
        if ($(this).val() === '') {
            $(this).val(ToDateDefault);
        }
    });

    $("#profileID").focus(function () {
        if ($(this).val() === profileIdDefault) {
            $(this).attr("value", "");
        }
    });
    $("#profileID").blur(function () {
        if ($(this).val() === '') {
            $(this).val(profileIdDefault);
        }
    });

    $("#organisationID").focus(function () {
        if ($(this).val() === organisationIdDefault) {
            $(this).attr("value", "");
        }
    });
    $("#organisationID").blur(function () {
        if ($(this).val() === '') {
            $(this).val(organisationIdDefault);
        }
    });
4

4 に答える 4

3

ドライに保ちます。例：

function setup(id, toCompare) {
    $(id).focus(function () {
        if ($(this).val() === toCompare) {
            $(this).attr("value", "");
        }
    }).blur(function () {
        if ($(this).val() === '') {
            $(this).val(toCompare);
        }
    });
}
setup("#startDate", FromDateDefault);
setup("#endDate", ToDateDefault);
setup("#profileID", profileIdDefault);
setup("#organisationID", organisationIdDefault);
于 2013-04-25T08:42:41.720 に答える
2

プレースホルダーを使用して、これを簡単に行うこともできます

<input id="startdate" placeholder="From Date" /><br />
<input id="endDate" placeholder="To Date" /><br />

フィドル

于 2013-04-25T08:47:24.683 に答える
0

次のようなことができます:- 

function toggleValue(valToCompare) {
     if ($(this).val() === valToCompare) {
         $(this).attr("value", "");
     } else if ($(this).val() === '') {
         $(this).val(valToCompare);
     }
}

$("#startDate").focus(function() {
    this.toggleValue(FromDateDefault);
}).blur(function() {
    this.toggleValue(FromDateDefault);
});

残りの要素についても同じことができます。

于 2013-04-25T08:39:20.220 に答える
0

data 属性を使用して、一部のデータを要素に格納できます。次に、要素に関連付けられた値をテストできます。例えば...

<input id="startdate" class="focus-value" data-empty="From Date" />
<input id="enddate" class="focus-value" data-empty="To Date" />

jqueryで...

$(".focus-value").focus(function() { 
    if $(this).val() === $(this).data('empty') { 
         $(this).attr("value", "");
    }
});

すべてのフォーカス ハンドラーとブラー ハンドラーを組み合わせることができます。

于 2013-04-25T08:43:21.107 に答える