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

您需要使用事件委托 -

$('#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 回答
0

您需要做的是选择您感兴趣的所有 div，并将更改功能应用于所有这些。

如果 id 为 Mondaydiv 的 div 包含您想要应用该功能的所有子 div，您可以使用该.eachdiv 的子级上的功能来添加此更改功能：

$('#Mondaydiv').children().each(function() { 

    $(this).change(function() { 
           $(this).toggle(); 
    });

);

这假设唯一的孩子是你想要应用它#Mondaydiv的div。monbus*如果不是这种情况，您需要以另一种方式选择它们，例如给它们一个唯一的类，并使用该类的find函数作为“#Mondaydiv”上的选择器。

于 2013-06-13T20:27:22.277 回答
0

准确解析您想要发生的事情有点困难，但我建议您使用 CSS 类而不是 ID 来定位有问题的元素，并在元素之间添加映射。

例如，为您当前拥有前缀为on的 IDmonbus的所有s 添加一个类。还要添加一个属性来指示相应的元素。所以，而不是：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 回答