2

jQuery で次の IF ステートメントを最適化するより良い方法はありますか?

次のコードを数回編集する必要がありましたが、必要な値を素敵な配列などに差し込むことができればいいのですが...

 $("#pmselect").change(function () {
        if ($("#pmselect option:selected").attr("class") == "null") {
            $('.avatar').hide();
            $('.pmpass').hide();
            $('.pmlogin').hide();
            $('#nullavatar').show();
        }
        if ($("#pmselect option:selected").attr("id") == "pm") {
            $('.avatar').hide();
            $('.pmpass').show();
            $('.pmlogin').show();
            $('#pmavatar').show();
        }
        if ($("#pmselect option:selected").attr("id") == "as") {
            $('.avatar').hide();
            $('.pmpass').show();
            $('.pmlogin').show();
            $('#asavatar').show();
        }
        if ($("#pmselect option:selected").attr("id") == "pn") {
            $('.avatar').hide();
            $('.pmpass').show();
            $('.pmlogin').show();
            $('#pnavatar').show();
        }
        if ($("#pmselect option:selected").attr("id") == "jm") {
            $('.avatar').hide();
            $('.pmpass').show();
            $('.pmlogin').show();
            $('#jmavatar').show();
        }
        if ($("#pmselect option:selected").attr("id") == "mh") {
            $('.avatar').hide();
            $('.pmpass').show();
            $('.pmlogin').show();
            $('#mhavatar').show();
        }
        if ($("#pmselect option:selected").attr("id") == "rh") {
            $('.avatar').hide();
            $('.pmpass').show();
            $('.pmlogin').show();
            $('#rhavatar').show();
        }
        if ($("#rmselect option:selected").attr("id") == "rm") {
            $('.avatar').hide();
            $('.pmpass').show();
            $('.pmlogin').show();
            $('#rmavatar').show();
        }
    });
4

3 に答える 3

3

switch / caseを使用できます。そうすれば、複数のケースで実行されるいくつかのことを統合できます...

switch( $("#pmselect option:selected").attr("id") ){
  case 'pm':
    //do stuff
    break;
  case 'xyz':
  case 'rh':
   //do stuff for xyz and rh
  case 'mh': 
   // do stuff for mh only
   break;
}
于 2013-03-02T12:33:04.720 に答える
0

これを試して：

$("#pmselect").change(function () {
        $('.avatar').hide();
        if ($("#pmselect option:selected").attr("class") == "null") {
            $('.pmpass, .pmlogin').hide();
            $('#nullavatar').show();
        } else {
            var id = $("#pmselect option:selected").attr("id");
            $('.pmpass, .pmlogin').show();
            $('.pmlogin').show();
            $('#' + id + 'avatar').show();
        }
    });
于 2013-03-02T12:38:47.220 に答える
0

最後の if 式がタイプミスであると仮定すると$("#rmselect option:selected")(イーグルアイド @RaymondChen の功績による)、コードは次のように単純化されていることがわかると思います。

$("#pmselect").change(function () {
    var opt = this[this.selectedIndex],
        isNull = $(opt).hasClass('null'),
        id = isNull ? 'null' : opt.id;
    $('.avatar').hide();
    $('.pmpass, .pmlogin')[isNull ? 'hide' : 'show']();
    $('#' + id + 'avatar').show();
});

視界なしif:)

タイプミスでない場合$("#rmselect option:selected")は、#rmselect 条件を個別に処理する必要があります。

于 2013-03-02T13:19:16.173 に答える