javascript - 在JS文件中除了数据描述之外还添加标题

Question

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

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 属性。我只是将标题放在描述 block 中。您可以将其分开(记住还要使 elem 可用。我只是通过创建本地 elem 变量来减少输入)。

        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();