Question

我使用Jquery-SimpleSlider从一组图像中制作一个灯箱，每个图像都有各自的描述。正如您在this demo中看到的那样，框中有一个空白区域，用于图像旁边的描述，我想在那里添加html代码（一堆div来添加标题，描述，价格等）而不是已经存在的描述，但我无法弄清楚如何去做。我尝试了几件但没有成功

这是相关的html

<ul class="product-gallery">
    <li class="gallery-img">
        <img src='uploads/img1.jpg' alt="img01">
        <div data-desc="Image Descript 1"></div>
    </li>

    <li class="gallery-img" style="display: none;">
        <img src='uploads/img2.jpg' alt="img02">
        <div data-desc="Image Descript 2"></div>
    </li>

    <li class="gallery-img" style="display: none;">
        <img src='uploads/img3.jpg' alt="img03">
        <div data-desc="Image Descript 3"></div>
    </li>

    <li class="gallery-img" style="display: none;">
        <img src='uploads/img4.jpg' alt="img04">
        <div data-desc="Image Descript 4"></div>
    </li>
</ul>

这是包含图片旁边显示的文字的div，但它在属性中，所以我无法将html放入其中，或者我可以吗？

<div data-desc="Image Descript 4"></div>

这是Simpleslide js文件

(function ($) {

jQuery.fn.Am2_SimpleSlider = function () {
    //popup div
    $div = $('<div class="product-gallery-popup"> <div class="popup-overlay"></div> <div class="product-popup-content"> <div class="product-image"> <img id="gallery-img" src="" alt="" /> <div class="gallery-nav-btns"> <a id="nav-btn-next" class="nav-btn next" ></a> <a id="nav-btn-prev" class="nav-btn prev" ></a></div> </div><div class="product-information"> <p class="product-desc"></p> </div> <div class="clear"></div><a href="#" class="cross">X</a></div></div>').appendTo('body');

    //on image click   
    $(this).click(function () {
        $('.product-gallery-popup').fadeIn(500);
        $('body').css({ 'overflow': 'hidden' });
        $('.product-popup-content .product-image img').attr('src', $(this).find('img').attr('src'));
        $('.product-popup-content .product-information p').text($(this).find('div').attr('data-desc'));
        $Current = $(this);
        $PreviousElm = $(this).prev();
        $nextElm = $(this).next();
        if ($PreviousElm.length === 0) { $('.nav-btn.prev').css({ 'display': 'none' }); }
        else { $('.nav-btn.prev').css({ 'display': 'block' }); }
        if ($nextElm.length === 0) { $('.nav-btn.next').css({ 'display': 'none' }); }
        else { $('.nav-btn.next').css({ 'display': 'block' }); }
    });
    //on Next click
    $('.next').click(function () {
        $NewCurrent = $nextElm;
        $PreviousElm = $NewCurrent.prev();
        $nextElm = $NewCurrent.next();
        $('.product-popup-content .product-image img').clearQueue().animate({ opacity: '0' }, 0).attr('src', $NewCurrent.find('img').attr('src')).animate({ opacity: '1' }, 500);



        $('.product-popup-content .product-information p').text($NewCurrent.find('div').attr('data-desc'));
        if ($PreviousElm.length === 0) { $('.nav-btn.prev').css({ 'display': 'none' }); }
        else { $('.nav-btn.prev').css({ 'display': 'block' }); }
        if ($nextElm.length === 0) { $('.nav-btn.next').css({ 'display': 'none' }); }
        else { $('.nav-btn.next').css({ 'display': 'block' }); }
    });
    //on Prev click
    $('.prev').click(function () {
        $NewCurrent = $PreviousElm;
        $PreviousElm = $NewCurrent.prev();
        $nextElm = $NewCurrent.next();
        $('.product-popup-content .product-image img').clearQueue().animate({ opacity: '0' }, 0).attr('src', $NewCurrent.find('img').attr('src')).animate({ opacity: '1' }, 500);

        $('.product-popup-content .product-information p').text($NewCurrent.find('div').attr('data-desc'));
        if ($PreviousElm.length === 0) { $('.nav-btn.prev').css({ 'display': 'none' }); }
        else { $('.nav-btn.prev').css({ 'display': 'block' }); }
        if ($nextElm.length === 0) { $('.nav-btn.next').css({ 'display': 'none' }); }
        else { $('.nav-btn.next').css({ 'display': 'block' }); }
    });
    //Close Popup
    $('.cross,.popup-overlay').click(function () {
        $('.product-gallery-popup').fadeOut(500);
        $('body').css({ 'overflow': 'initial' });
    });

    //Key Events
    $(document).on('keyup', function (e) {
        e.preventDefault();
        //Close popup on esc
        if (e.keyCode === 27) { $('.product-gallery-popup').fadeOut(500); $('body').css({ 'overflow': 'initial' }); }
        //Next Img On Right Arrow Click
        if (e.keyCode === 39) { NextProduct(); }
        //Prev Img on Left Arrow Click
        if (e.keyCode === 37) { PrevProduct(); }
    });

    function NextProduct() {
        if ($nextElm.length === 1) {
            $NewCurrent = $nextElm;
            $PreviousElm = $NewCurrent.prev();
            $nextElm = $NewCurrent.next();
            $('.product-popup-content .product-image img').clearQueue().animate({ opacity: '0' }, 0).attr('src', $NewCurrent.find('img').attr('src')).animate({ opacity: '1' }, 500);

            $('.product-popup-content .product-information p').text($NewCurrent.find('div').attr('data-desc'));
            if ($PreviousElm.length === 0) { $('.nav-btn.prev').css({ 'display': 'none' }); }
            else { $('.nav-btn.prev').css({ 'display': 'block' }); }
            if ($nextElm.length === 0) { $('.nav-btn.next').css({ 'display': 'none' }); }
            else { $('.nav-btn.next').css({ 'display': 'block' }); }
        }

    }

    function PrevProduct() {
        if ($PreviousElm.length === 1) {
            $NewCurrent = $PreviousElm;
            $PreviousElm = $NewCurrent.prev();
            $nextElm = $NewCurrent.next();
            $('.product-popup-content .product-image img').clearQueue().animate({ opacity: '0' }, 0).attr('src', $NewCurrent.find('img').attr('src')).animate({ opacity: '1' }, 500);

            $('.product-popup-content .product-information p').text($NewCurrent.find('div').attr('data-desc'));
            if ($PreviousElm.length === 0) { $('.nav-btn.prev').css({ 'display': 'none' }); }
            else { $('.nav-btn.prev').css({ 'display': 'block' }); }
            if ($nextElm.length === 0) { $('.nav-btn.next').css({ 'display': 'none' }); }
            else { $('.nav-btn.next').css({ 'display': 'block' }); }
        }

    }
};

} (jQuery));

我还尝试更改JS文件中的弹出div($div)（第5行），添加另一个＆＃39; p＆＃39;已存在的＆＃39; p＆＃39;旁边的元素包含其中描述的元素，并在html文件中添加了另一个div，其中包含data-title="title"而不是data-desc="......"。我还添加了这一行：

$('.product-popup-content .product-information p').text($(this).find('div').attr('data-desc'));

在//onimageclick内用data-desc替换data-title，但它无法正常工作

有什么建议吗？

Answer 1

代码中的某个地方你有这一行：

$('.product-popup-content .product-information p').text($(this).find('div').attr('data-desc'));

为什么不编辑此行并使用DIV元素内容而不是data-desc属性？这就像

$('.product-popup-content .product-information p').text($(this).find('div').html());

如果您担心显示的div内容，可以通过CSS隐藏它

如何将DIV添加到Jquery - Simpleslider插件？

1 个答案: