1

最初にいくつかの選択フォームを作成する Web ページを開発しています。ユーザーが特定の選択フォームのオプションを選択すると、ユーザーの選択に応じて別のサブフォームが作成され、その選択フォームに追加されます。残念ながら、私のコードは機能しません。たとえば、(1) サブフォームが作成されず、(2) サブフォームを追加するためのセレクターが正しくコーディングされていません。それらは常に固定値 (#wrapper-options3) を指します。元のコードはもっと複雑ですが、以下のコードの構造といくつかの簡単な関数の例をコピーしたところ、元のコードと同じエラーが発生します。サブフォームの追加 (以下のコードのステップ 2) を正しくコーディングするにはどうすればよいですか? たとえば、#wrapper-options の正しいセレクター値を取得する方法は?

    <script>
    $(document).ready(function(){ 
        var previous;

        //functions
        var Buildform = function(i){
            var form;
            form = '<select class="eprodtype'+i+'" name="transport'+i+'">';
            form += '<option value="bike"> Bike'+i+' </option>';
            form += '<option value="car"> Car'+i+' </option>';
            form += '</select>';
            form += '<div id="wrapper-options'+i+'"> "wrapper-options'+i+'" </div>';
            return $(form);
        }//Buildform

        var Buildsubform = function(i){ //i will contain <select> value 
           var subform = '<p> '+i+' </p>';
           console.log('Buildsubform():'+subform);
           return $(subform);
        }

        //step 1: build 'base' form with multiple select forms
        for(var i=0;i<3;i++){
            var form = Buildform(i);
            $('#wrapper').append(form);

        }

        //step 2: build subform depending on choice user within base form
        for(var i=0;i<3;i++){
          $(".eprodtype"+i).focus(function () {
            // Store the current value on focus and on change
            var previous = this.value; //old select value
          }).change(function() {

          var subform = Buildsubform(this.value);
          console.log('append subform'+subform);
          //ERROR IN THE NEXT 2 LINES; selector '#wrapper-options'+i always has a value #wrapper-options3 - instead of a dynamic value
          $('#wrapper-options'+i).html(''); //remove previous subform
          $('#wrapper-options'+i).html(subform);
          var str = '#wrapper-options'+i;
          console.log('wrapper-options val: '+str);
          console.log('change eprod val: '+this.value);

          previous = this.value;
       });
        }//for i

    }); //$(document).ready  
    </script>
</head>
<body>
    <form>
      <div id="wrapper"></div> <!--wrapper for function Buildform() -->
    </form>
</body>
4

2 に答える 2

0

この.change()関数は、インラインではなくイベントで起動するため、関数をラップするコードとは異なるスコープを持っています。そのため、実行時に値が何であるかはわかりませんi。関数に値を渡して正しい参照を取得する必要があります。そうしないとi、ラッピング コードの実行が終了してからの最後の値になります。

また、相対セレクターを使用し、要素の番号付けを廃止することを検討することもできます。

于 2013-11-14T20:58:04.050 に答える