Question

我制作了一个小部件，可以使用一些自定义选项将内容加载到引导模式。它在第一次点击时正常工作。然后我尝试用同一页面中的另一个按钮加载另一个内容。但它显示以前加载的消息。我该怎么修理它。检查下面的代码。

插件代码，

$(function() {
$.widget("custom.modalLoad", {
        // default options
        options: {

            img: '',
            des: '',
            desTag: '<h5>',

        },

        _create: function() {
            var t = this;
            t._modal = $('<div id=\'learnModal\' class=\'modal fade\' role=\'dialog\'> ');

            t._modalDialog = $('<div class=\'modal-dialog modal-lg\'>');

            $(t._modal).append(t._modalDialog);

            t._modalContent = $('<div class=\'modal-content\'>');

            $(t._modalDialog).append(t._modalContent);

            t._modalHeader = $('<div class=\'modal-header\'>' +
                '<button type=\'button\' class=\'close\' data-dismiss=\'modal\'>&times;</button>' +
                '<h4 class=\'modal-title\'>Modal Header</h4>' +
                '</div>');

            $(t._modalContent).append(t._modalHeader);


            t._modalBody = $('<div class=\'modal-body\'>');

            t._modalInside = $('<div class=\'row\'>');

            t._modalImgDiv = $('<div class=\'col-md-6\'>');

            t._modalImg = $('<img />');
            $(t._modalImg).attr('src', t.options.img);
            $(t._modalImgDiv).append(t._modalImg);

            t._modalDesDiv = $('<div class=\'col-md-6\'>');               
            t._modalDes = $(t.options.desTag);
            $(t._modalDes).append(t.options.des);
            $(t._modalDesDiv).append(t._modalDes);

            $(t._modalBody).append(t._modalInside);
            $(t._modalInside).append(t._modalImgDiv);
            $(t._modalInside).append(t._modalDesDiv);

            $(t._modalContent).append(t._modalBody);


            t._modalFooter = $('<div class=\'modal-footer\'>' +
                '<button type=\'button\' class=\'btn btn-default\' data-dismiss=\'modal\'>Close</button>' +
                '</div>');

            $(t._modalContent).append(t._modalFooter);
            t.element.append(t._modal);


        },

        _setOption: function() {

            $(this._modalImg).attr('src', this.options.img);

            $(this._modalDes).append(this.options.des);

        }       


});
});

html div和按钮，

<button class="button-learn" id="sec-1-single" data-toggle="modal" data-         
target="#learnModal">LEARN MORE</button>

<button class="button-learn" id="sec-1-multi" data-toggle="modal" data-         
target="#learnModal">LEARN MORE</button>

  <div id="modal-load"> </div>

调用方法，

$('#sec-1-single').on('click', function() {

    $("#modal-load").modalLoad({
        img: 'img/single-modal.png',
        des: 'Lorem ipsum dolor sit amet',

    })
});

$('#sec-1-multi').on('click', function() {

    $("#modal-load").modalLoad({
        img: 'img/client-icon.png',
        des: 'Lorem ipsum dolor sit qui officia deserunt mollit anim id est laborum',

    })
});

我需要做什么重新初始化小部件？

Answer 1

我已修改我的问题，方法是更改_setOption方法，如下所示

_setOption: function(key, value) {
            var t = this;

            if (key == "img") {
                $(t._modalImg).attr('src', value);
            }

            if (key == "des") {
                $(t._modalDes).remove();
                t._modalDes = $(t.options.desTag);
                $(t._modalDes).append(value);
                $(t._modalDesDiv).append(t._modalDes);
            }

        }

如何在jquery小部件工厂中重新初始化

1 个答案: