代码之家 › 专栏 › 技术社区 › sundowatch

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

modal-dialog twitter-bootstrap css html jquery

sundowatch · 技术社区 · 6 年前

我正在尝试使用引导程序和jquery模式对话框。数据来自Anchor的数据标题。但在数据标题中,文本必须格式化为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。

如何在模式标题中设置格式化文本?

1 回复 | 直到 6 年前

ReSedano 6 年前

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