Question

我正在尝试使用Bootstrap和jQuery模式对话框。数据来自锚的数据标题。但是在数据标题中，文本必须格式化为HTML标签。

这是代码：

<a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title="Some title" data-caption="<p>DATA CAPTION</p>" data-image="img.jpg" data-target="#image-gallery">

顺便说一下，模态代码是：

<div class="modal fade" id="image-gallery" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title" id="image-gallery-title"></h4>
                        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Kapat</span></button>
                    </div>
                    <div class="modal-body">
                        <img id="image-gallery-image" class="img-fluid" src="">
                    </div>
                    <div class="modal-footer">

                        <div class="col-md-2">
                            <button type="button" class="btn btn-primary" id="show-previous-image">Geri</button>
                        </div>

                        <div class="col-md-8 text-justify" id="image-gallery-caption">
                            This text will be overwritten by jQuery
                        </div>

                        <div class="col-md-2">
                            <button type="button" id="show-next-image" class="btn btn-default">İleri</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

编辑：jQuery代码：

$(document).ready(function(){
    loadGallery(true, 'a.thumbnail');

});

function loadGallery(setIDs, setClickAttr){
    var current_image,
        selector,
        counter = 0;

    $('#show-next-image, #show-previous-image').click(function(){
        if($(this).attr('id') == 'show-previous-image'){
            current_image--;
        } else {
            current_image++;
        }

        selector = $('[data-image-id="' + current_image + '"]');
        updateGallery(selector);
    });

    function updateGallery(selector) {
        var $sel = selector;
        current_image = $sel.data('image-id');
        $('#image-gallery-caption').text($sel.data('caption'));
        $('#image-gallery-title').text($sel.data('title'));
        $('#image-gallery-image').attr('src', $sel.data('image'));
        disableButtons(counter, $sel.data('image-id'));
    }

    if(setIDs == true){
        $('[data-image-id]').each(function(){
            counter++;
            $(this).attr('data-image-id',counter);
        });
    }
    $(setClickAttr).on('click',function(){
        updateGallery($(this));
    });
}

一切正常，除了文本格式。 “ <p>DATA CAPTION</p>”显示为文本，而不是HTML。

如何在模式标题中将其格式化为文本？

Answer 1

尝试更改此行

$('#image-gallery-caption').html($sel.data('caption'));

数据标题中的HTML代码用于格式化文本

1 个答案: