0

次のコードを使用しようとしています

$('#monbus1').change(function() { $('#montype1').toggle(); });

一連の動的 div を編集するには、表示したい div ごとにこれらのいずれかを作成する必要があるのか​​ 、それともすべて自動で行う方法があるのか​​ 疑問に思っていたので、それらを 15 個持つ必要はありません（最大作るための15個の箱

$("#monaddButton").click(function () {
if(moncounter>15){
        alert("Only 15 textboxes allowed,if more needed let me know");
        return false;
}   

var MonNewTextBoxDiv = $(document.createElement('div'))
     .attr("id", 'Mondiv' + moncounter);

MonNewTextBoxDiv.after().html('<div><label>Arrival time:</label><input type="time" id="monarr' + moncounter + '" name="monarr' + moncounter + '"></div><div><label>Place/Location:</label><input type="text" id="monadd' + moncounter +
'" name="monadd' + moncounter + '"></div><div><label>Work/Activities:</label><input type="textbox" id="monadd' + moncounter + '" name="monadd' + moncounter +
'"></div><div><label>Departure time:</label><input type="time" id="mondep' + moncounter + '" name="mondep' + moncounter + '"></div><label>Bus</label><input type="checkbox" id="monbus' + moncounter +
'" name="monbus' + moncounter + '"><label>Walking</label><input type="checkbox" id="monwal' + moncounter + '" name="monwal' + moncounter + '"><label>Other</label><input type="checkbox" id="monoth' + moncounter +
'" name="monoth' + moncounter + '"><div id="nummonbus' + moncounter + '" style="display:none">Bus #:<input type="text" id="busmon' + moncounter + '" name="busmon' + moncounter + '" size="4"></div><div id="nummonoth' + moncounter +
'" style="display:none">Other:<input type="text" name="othmon' + moncounter + '" id="othmon' + moncounter + '"></div>');

MonNewTextBoxDiv.appendTo("#Mondaydiv");`

私はそれを解決しようとしてきましたが、動的コンテンツの使用方法をまだ学んでいます。私が抱えていた他の小さなバグのいくつかを修正しましたが、これを理解できませんでした。あなたの助けに感謝します

4

3 に答える 3

0

実現したいことを正確に解析するのは少し難しいですが、ID ではなく CSS クラスを使用して問題の要素をターゲットにし、要素間のマッピングを追加することをお勧めします。

たとえば、現在 ID が on のプレフィックスを持つmonbusすべての にクラスを追加します。また、対応する要素を示す属性を追加します。したがって、代わりに：inputmonbusdata-

'<input type="checkbox" id="monbus' + moncounter + '" name="monbus' + moncounter + '">'

使用する：

'<input class="monbus" data-toggle="montype' + moncounter + '" type="checkbox" id="monbus' + moncounter + '" name="monbus' + moncounter + '">'

次に、コードは単純になります。

$('.monbus').change(function() { 
    var whatToToggle = $(this).data('toggle'); 
    $('#' + whatToToggle).toggle(); 
});
于 2013-06-13T20:50:44.537 に答える
0

イベント委任を使用する必要があります-

$('#Mondaydiv').on('change','#monbus1',function() {
   $('#montype1').toggle();
});

changeすべての入力にイベントをバインドするにはmonbus-

$('#Mondaydiv').on('change','[id^=monbus]',function() {
       var count = this.id.replace('monbus','');
       $('#montype'+count).toggle();
});
于 2013-06-13T20:23:49.557 に答える