0

我正在使用 Twitter Bootstrap 弹出框添加标签。

在弹出窗口中，我使用 html 选择器加载标签列表，当单击标签时，我添加了一个类。问题是当我关闭弹出框并想要第二次打开它时，设置的类不再可见。

这是我的 JS：

    var isVisible = false;
    var clickedAway = false;

    $('.btn-label-popover').popover({
            animation: true,
            placement: 'top',
            title: 'Selecteer labels',
            content: $('.controls .popover-content').html(),
            trigger: 'manual'
        }).click(function(e) {
            e.preventDefault();
            if(isVisible & clickedAway){
                $('.btn-label-popover').popover('hide');
                isVisible = clickedAway = false;
            } else {
                $(this).popover('show');
                clickedAway = false;
                isVisible = true;
            }
    });

    $('body').on('click', '.popover-content span', function(e){
        e.stopPropagation();
        var identifier = $(this).parent().attr('class');
        $('.'+identifier+' span').toggleClass('label-inverse');
        $('.'+identifier+' span').toggleClass('label-reminder');
    });

    $(document).click(function(e) {
      if(isVisible & clickedAway)
      {
        $('.btn-label-popover').popover('hide');
        isVisible = clickedAway = false;
      }
      else
      {
        clickedAway = true;
      }
    });

    $(document).keyup(function(e) {
        if (e.keyCode == 27) {
            if(isVisible & clickedAway)
            {
                $('.btn-label-popover').popover('hide');
                isVisible = clickedAway = false;
            } else {
                clickedAway = true;
            }
        }
    });

有没有办法通过添加的类来获取 HTML？非常感谢！

4

1 回答 1

2

您丢失类的原因是 Twitter 引导程序在隐藏时从 DOM 中删除了弹出框。您需要将每个更改的弹出框的 id/class 存储在一个数组中，并使用它来重新添加必要的类。例如：

var identifiers = [];

$('.btn-label-popover').popover({
        // your options
    }).click(function(e) {
        e.preventDefault();
        if(isVisible & clickedAway){
            $('.btn-label-popover').popover('hide');
            isVisible = clickedAway = false;
        } else {
            $(this).popover('show');

            // Loop through changed popovers
            for(i=0; i<identifiers.length, i++){
                $('.'+identifiers[i]+' span').toggleClass('label-inverse');
                $('.'+identifier[i]+' span').toggleClass('label-reminder');
            }
            clickedAway = false;
            isVisible = true;
        }
});

$('body').on('click', '.popover-content span', function(e){
    e.stopPropagation();
    var identifier = $(this).parent().attr('class');

    // Add to an array
    identifiers.push(identifier);

    $('.'+identifier+' span').toggleClass('label-inverse');
    $('.'+identifier+' span').toggleClass('label-reminder');
});
于 2012-12-07T12:58:02.650 回答