2

私は次のHTMLフォームを持っています:-

<form id="subform">
    <p>
        <input type="button" id="btn" value="Go!"/>
    </p>
    <p>
        <select id="optlist">
            <option value="1">Option 1</option>
            <option value="2">Option 2</option>
            <option value="3">Option 3</option>
        </select>
    </p>
</form>

そして、次の jQuery スニペット:-

$("#btn").click(function () {
    // if address select list is visible slide it up and then slide down new <p> tag
    if ($('#optlist').is(":visible")) {
        $('form > p:nth-child(2)').slideUp('slow', function () {
            $('<p id="noresults">No results found</p>').insertAfter('form > p:nth-child(2)').hide().slideDown("slow");
        });
    }
    // else if select list is not visible just slide down the new <p> tag
    else {
        $('<p id="noresults">No results found</p>').insertAfter('form > p:nth-child(2)').hide().slideDown("slow");
    }
});

私がやりたいことは、#optlist現在表示されている場合は新しいslideUp()タグ、それ以外の場合は新しいタグです (現在非表示の場合)。slideDown()<p>slideDown()<p>#optlist

上記では問題なく動作しますが、少し不格好ですが、たとえば、ステートメントとステートメント<p>の両方でnew の挿入を繰り返さなければなりません。ifelse

また、これに加えて、小さなバグがあります。#noresults <p>タグが既に存在する場合、現在別のタグが追加され#noresultsます。既に存在する場合、現在のフラッシュを取得するにはどうすればよいですか?

を使用して存在するかどうかを確認できますが、if ( $("#noresults").length ) {};これを繰り返す必要もあります ( ifand でelse)。

new のチェックと作成を<p>関数に入れ、それを呼び出すことができました。

現在のコードを構造化するより良い方法はありますか?

ここでフィドル

4

2 に答える 2

4

望ましい動作は常に#optlistを非表示にし、＃noresultsdivを表示することであるためと思われます。あなたがこのようなことをすることができるということ：

HTML：

<form id="subform">
    <p>
        <input type="button" id="btn" value="Go!"/>
    </p>
    <p id="optlist_container">
        <select id="optlist">
            <option value="1">Option 1</option>
            <option value="2">Option 2</option>
            <option value="3">Option 3</option>
        </select>
    </p>
    <p id="noresults" style="display: none;">No results found</p>
</form>

そしてjQueryの場合：

$('#btn').click(function() {
    $('#optlist_container').slideUp('slow', function() {
        $('#noresults').slideDown('slow');
    });
});

とにかく常に非表示にする場合は、＃optlistの可視性を確認する理由はありません。また、最初から#noresults要素を簡単に配置できるため、追加を続ける理由はありません。

于 2013-03-15T16:02:42.237 に答える
1

コードを繰り返す必要はありません。繰り返されるコードはいつでも関数に移動できます。

たとえば、繰り返しを避けるためにコードに最小限の変更を加えます。

function noResults() {
    $('<p id="noresults">No results found</p>')
        .insertAfter('form > p:nth-child(2)')
        .hide()
        .slideDown("slow");
}

$("#btn").click(function() {
    // if address select list is visible slide it up and then slide down new <p> tag
    if ($('#optlist').is(":visible")) {
        $('form > p:nth-child(2)').slideUp('slow', noResults);
    }
    // else if select list is not visible just slide down the new <p> tag
    else {
        noResults();
    }
});

また、繰り返されるコードで長いjQueryチェーンを使用し、読みやすくするために再フォーマットしました。繰り返しを削除すると、それがより実現可能になります。

于 2013-03-15T16:01:38.250 に答える