使用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类，javasript将是这样的：

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