JS文件中除数据描述外添加标题

Question

我正在开发一个 jquery 库，每个图像都有一个数据描述。我想在每个数据描述上方添加一个标题。我怎样才能做到这一点？我想不明白。谢谢。我怀疑需要在下面发布的代码 sn-p 中更改变量。

var $loader = $rgGallery.find('div.rg-loading').show();

                $items.removeClass('selected');
                $item.addClass('selected');

                var $thumb      = $item.find('img'),
                    largesrc    = $thumb.data('large'),
                    title       = $thumb.data('description');


                $('<img/>').load( function() {

                    $rgGallery.find('div.rg-image').empty().append('<img src="' + largesrc + '"/>');

                    if( title )
                        $rgGallery.find('div.rg-caption').show().children('p').empty().text( title );

                    $loader.hide();

                    if( mode === 'carousel' ) {
                        $esCarousel.elastislide( 'reload' );
                        $esCarousel.elastislide( 'setCurrent', current );
                    }

                    anim    = false;

                }).attr( 'src', largesrc );

            };

        return { init : init };

    })();

    Gallery.init();
});

这是我在 js fiddle 文件中的 html 代码：jsfiddle.net/amw312/tq86nv7z/62/

Answer 1

我认为这应该让您走上正确的道路。当然，我不知道你是否想要一些特殊的格式。我在您的示例中看到，您已经添加了 data-title 属性。我只是将标题放在描述块中。你可以把它分开（记住也要让 elem 可用。我只是通过创建一个本地 elem var 来减少打字）。

        var $thumb      = $item.find('img'),
            largesrc    = $thumb.data('large'),
            description = $thumb.data('description');
            title       = $thumb.data('title');


        $('<img/>').load( function() {

            $rgGallery.find('div.rg-image').empty().append('<img src="' + largesrc + '"/>');

            if( description ){
                 var elem =  $rgGallery.find('div.rg-caption').show().children('p') 
                 elem.empty().text( description );

                 if(title)
                     elem.prepend(title + "<br />");
             }

            $loader.hide();