0

ラベルを追加するためにTwitterBootstrapポップオーバーを使用しています。

ポップオーバーで、htmlセレクターを使用してラベルのリストをロードし、ラベルをクリックするとクラスを追加します。問題は、ポップオーバーを閉じて2回目に開きたいときに、設定されているクラスが再び表示されないことです。

これが私の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/クラスを配列に格納し、それを使用して必要なクラスを再度追加する必要があります。例えば：

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 に答える