2

これは、SOに関する私の最初の詳細な質問です。

こんにちは、フォームがあり、ユーザーがドロップダウン リストで [その他] オプションを選択したときに、ドロップダウン リストの後にテキスト フィールドを表示したい場合がたくさんあります。

標準の命名規則を使用していますが、ドキュメント内の DDL/テキスト フィールドのペアと同じ数の関数を使用する必要がありますか?それとも、DDL のクラスで呼び出すことができる単一の関数を使用できますか? HTMLは次のとおりです。

<label for="spotter">Spotter:</label>
<select id="spotter" required>
    <option value="Snoop Dogg">Snoop Dogg</option>
    <option value="MC Escher">MC Escher</option>
    <option value="Linus Thorvalds">Linus Thorvalds</option>
    <option value="Other">Other</option>
</select>
<br/>

<div id="spotter_other_div"><label for="spotter_other">Other Spotter:</label><br><input type="text" name="spotter_other" id="spotter_other" size="50" required/></div>

そしてここにjQuery/javascriptがあります：

$(document).ready(function(){   
    $("#spotter").change(function () {
        //alert("You just changed the value of the #spotter drop down menu.");
        if ($(this).val() == "Other" )
            //alert("You just changed the value of the #spotter drop down menu to 'Other.'");
            $("#spotter_other_div").css("visibility", "visible");
        else
            $("#spotter_other_div").css("visibility", "collapse");
    });     
});

テキストフィールドを含む div の初期状態は、css で「折りたたみ」です。

私はjQueryを学んでいて、一般的なケースで何かをする方法を知っているところです.これが私が書くことができる関数なのか、それとも明示的に行う必要があるのか​​.

このページは進行中の作業であるため、任意の提案を歓迎します (たとえば、div の代わりにスパンを使用してテキスト フィールドを含めるなど)。

ありがとう！

4

2 に答える 2

2

いくつかのコードで単一の関数を使用し、それを複数回 (または同じidorを使用している場合は 1 回) 呼び出すことができますclass... したがって、関数の目的: コードの再利用可能なビット。これがどのように見えるかです。

$(function () { //shorthand for ready in jQuery
    //set up your function
    function dropDownOther(spotter, spotterDiv) { //function takes two args
        $(spotter).change(function () {
            if ($(this).val() == "Other") {
                $(spotterDiv).css("visibility", "visible");
            } else {
                $(spotterDiv).css("visibility", "collapse");
            }
        });
    }
    dropDownOther("#spotter", "#spotter_other_div"); //call your function
    dropDownOther("#otherSelector", "#otherSelectorTwo"); //call it again if necessary 
});
于 2013-08-09T19:25:55.787 に答える
2

ここには 2 つの選択肢があります。

  1. 関数を作成し、パラメータ化します。これは Sethen Maleno の答えが示すものです。
  2. 関数をより一般的な関数にします。

例えば：

$(document).ready(function(){   
    // Apply this to every select element
    $("select").change(function () {
        // Dynamically build up the selector to show/hide
        var secondMenuId = '#' + $(this).attr(id) + '_other_div'
        if ($(this).val() == "Other" )
            $(secondMenuId).css("visibility", "visible");
        else
            $(secondMenuId).css("visibility", "collapse");
    });     
});

このアプローチでは、HTML を生成するときに規律が必要であり、ID が適切に割り当てられていることに注意してください (標準の命名規則の使用について言及しているため、そうしているようです)。

このアプローチには、これが唯一のコードであり、多くのハンドラーを記述する必要がないという利点があります。

Sethen's は、ID が厳密な規則に従う必要がないという点で、もう少し柔軟性を提供します (引数として必要なものを渡すことができます)。

どちらの手法も有効であり、それぞれの時間と場所があります。

于 2013-08-09T19:35:56.760 に答える