一种更干净的方法来使用Bootstrap / jquery动态添加标签/标签内容？

Question

我目前正在动态添加标签，如下所示：

$('input[type="checkbox"]').on('click', function () {
    var hotel = $(this).is(':checked');
    if (hotel) {
        $('.nav-tabs').append('<li class="hotel"><a href="#hotel" data-toggle="tab">Hotel</a></li>');
        $('.tab-content').append('<div class="tab-pane hotel" id="hotel"><div>lol</div></div>');
    } else {
        $('.hotel').remove();
    }
});

但是我认为这很麻烦，因为我的JS中正在生成许多HTML。 这些标签实际上将包含表单输入，因此我可以看到此javascript很快变得混乱。

我是在正确执行此操作，还是有更简单的方法？

Answer 1

如何将酒店标签添加到标记中，但默认情况下将其隐藏？ 添加display: none; 到您的.hotel css类， .hotel将如下所示：

$('input[type="checkbox"]').on('click', function () {
    var hotel = $(this).is(':checked');
    $('.hotel').toggle(hotel);
});