0

そうでなければこれを行う方法がわからない...しかし、これは私がやろうとしていることです:

私はラジオボックスの配列を持っています

<div id="xrowcont_0">
    <input type="radio" name="13_641" value="a" id="13_641_form_a" ><label for="13_641_form_a"><span></span></label>
    <input type="radio" name="13_641" value="b" id="13_641_form_b" checked="checked"><label for="13_641_form_b"><span></span></label>
    <div id="xmod_mach_list_0" style="display:none;">BOO1</div>
</div>

<div id="xrowcont_1">
    <input type="radio" name="13_642" value="a" id="13_642_form_a"><label for="13_642_form_a"><span></span></label>
    <input type="radio" name="13_642" value="b" id="13_642_form_b"><label for="13_642_form_b"><span></span></label>
    <div id="xmod_mach_list_1" style="display:none;">BOO2</div>
</div>

... ++++

でラジオボックス「B」を選択すると<div id="xrowcont_0">、各行<div id="xmod_mach_list_1"の横に表示されます。

ここにjsがあります：

13行あるとしましょう...

for (var i=0;i<13;i++) {    
    var a1 = "'#xrowcont_" + [i] + " input[type=radio]'";
    var a2 = "'#xrowcont_" + [i] + " input:checked'";

    console.log(a1);
    console.log(a2); // these show up just fine.

    $(a1).on( "click", function() { // but here it breaks.
        var state = $(a2).val();
        if (state == "b") {
            $('#xmod_mach_list_' + [i] ).css('opacity',0).show().animate({ opacity: 1 }, 300);
            console.log("Show Button");

        } else { 
            $('#xmod_mach_list_' + [i] ).animate({ opacity: 0} , 200);
            setTimeout(function () {$('#xmod_mach_list_' + [i] ).hide(); }, 200); 
            console.log("Hide Button");
        };    
    });
}

Uncaught Error: Syntax error, unrecognized expression: '#xrowcont_0 input[type=radio]'などの部分に入力したいのですが、それは私に与えます... $(a1).on( "click", function() {...。

どうすればこれを修正できますか?

4

2 に答える 2

5

ブラケットを取り外します。唯一の項目として[i]含まれる配列です。i

また、クロージャーの魔法のおかげiで、 aを使用すると問題が発生することにも注意してください。setTimeout次のようにループを形成することを検討してください。

for(i ......) { (function(i) {
    ...
})(i); }
于 2013-06-12T14:29:16.267 に答える
2

問題は、文字列a1とa2が無効な jQuery セレクターであることです。それらの値に一重引用符を含めたくないという考えに反して、それらを削除します。

そのはず：

var a1 = "#xrowcont_" + [i] + " input[type=radio]";
var a2 = "#xrowcont_" + [i] + " input:checked";

あなたはしません：

$("'#xrowcont_0 input[type=radio]'").on(...);

したがって、セレクターを個別の変数として宣言するときに、それらを文字列内に配置しないでください。セレクター自体は ではなく'#foo'、#fooです。一重引用符または二重引用符は、jQuery オブジェクトに渡されるときに文字列であることを示すためだけに存在しますが、変数はすでに文字列です。

forそのコードには、ループと関係のない別の問題があります。イベント ハンドラとsetTimeoutの両方を使用して一部のコードの実行を遅らせていますが、その関数内でi(ループのインデックス変数) を使用しています。遅延実行がループの最後のfor反復にの値を使用する JavaScript での変数のスコープ方法が原因です。i

これを回避するには、すぐに呼び出される関数式を使用して、新しいクロージャー (変数の新しいスコープ) を作成する必要があります。

for(var i = 0; i < 13; i++) {
    (function(i) {
        // i here is a different variable to i outside
        // it's passed, and maintains, the value for this iteration of the loop
        ... // your loop code
    })(i);
}
于 2013-06-12T14:40:01.150 に答える