Question

我试图使用以下代码

$('#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");`

我一直在努力解决这个问题，但是我仍然在学习如何使用动态内容，我修复了一些其他的小错误，但我无法解决这个问题，谢谢你先进的帮助

Answer 1

您需要使用事件委派 -

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

在所有change输入上绑定monbus事件 -

$('#Mondaydiv').on('change','[id^=monbus]',function() {
       var count = this.id.replace('monbus','');
       $('#montype'+count).toggle();
});

Answer 2

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

如果id为Mondaydiv的div包含要应用该函数的所有子div，则可以使用该div子项上的.each函数添加此更改函数：

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

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

);

这假设#Mondaydiv的唯一子项是您要应用它的monbus* div。如果不是这种情况，则需要以其他方式选择它们，例如为它们提供一个唯一的类，并使用find函数将该类作为'#Mondaydiv'上的选择器。< / p>

Answer 3

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

例如，向您当前拥有前缀为monbus的ID的所有input添加一个monbus类。还要添加data-属性以指示相应的元素。所以，而不是：

'<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(); 
});

使用多个动态jquery

3 个答案: