0

我有以下网页：链接到页面。如果您转到“画廊”部分，您可以在左侧看到一个照片滑块和一个菜单。滑块上的每个图像都是可单击的，如果单击，则会用刚刚单击的照片填充空白区域。

正确到那里。

问题是，当您想更改部分时（在您的左侧，菜单显示“Nuestra tienda 2011”、“Mayo 2012”），假设我所做的是更改底部的ul画廊的内容。

为此，我编写了以下代码：

<div id="lista_galerias">
            <ul>
                <li><div id="nuestra_tienda_show">Nuestra tienda 2011</div>
                    <script type="text/javascript">
                        $('#nuestra_tienda_show').click(function()
                        {
                            $('.jCarousel').html('');
                            $('<ul><li><div id="clickable"><img src="img/Escaparates_2011/img1.jpg" alt="Dormitorio azul turquesa." width="100" height="100"></img></div></li></ul>')
                                .prependTo('jCarousel');
                            $('#galeria_seleccionada').html('Nuestra tienda 2011');
                        });

                    </script>
                </li>
                <li><div id="mayo_2012_show">Mayo 2012</div>
                    <script type="text/javascript">
                        $('#mayo_2012_show').click(function()
                        {
                            $('.jCarousel').html('');
                            $('<ul><li><div id="clickable"><img src="img/Mayo_2012/img1.jpg" alt="" width="100" height="100"></img></div></li></ul>')
                                .prependTo('.jCarousel');
                            $('#galeria_seleccionada').html('Mayo 2012');
                        });

                    </script>
                </li>
            </ul>
        </div>

和 jCarousel div：

<!-- DIV Contenedor de la imagen de la galería -->
        <div id="containerGaleria">
            <div id="containerImage"></div>
        </div>
        <!-- DIV Contenedor de la galeria de imágenes -->
        <div class="container_carousel">
            <div class="jCarousel">
                <ul>
                    <li><div id="clickable"><img src="img/Escaparates_2011/img1.jpg" alt="1" width="100" height="100"></div></li>
                    <li><div id="clickable"><img src="img/Escaparates_2011/img2.jpg" alt="2" width="100" height="100"></div></li>
                    <li><div id="clickable"><img src="img/Escaparates_2011/img3.jpg" alt="3" width="100" height="100"></div></li>
                </ul>
            </div>
            <button class="prev"><<</button>
            <button class="next">>></button>
        </div>

如您所见，我有一个包含 jCarousel 的div，另一个包含修改此 jCarousel div 内容的部分列表。

所以我的怀疑是：

我想也许当我删除 jCarousel 的 html 内容时，由于某种原因它不会重新加载 jCarousel 效果，并且它显示......好吧，作为一个没有属性的普通列表。如何重新加载该 jCarousel 列表以查看第一次加载页面时的样子？

编辑：我添加了这个：

$('#nuestra_tienda_show').click(function()
    {
        $('.jCarousel').html('');
        $('<ul><li><div id="clickable"><img src="img/Escaparates_2011/img1.jpg" alt="Dormitorio azul turquesa." width="100" height="100"></img></div></li></ul>')
            .prependTo('.jCarousel');
        $('#galeria_seleccionada').html('Nuestra tienda 2011');
                            $('.jCarousel').jCarouselLite({
                                btnNext: ".next",
                                btnPrev: ".prev"
                           });
                        });

但是，我的列表没有出现。即使我只添加

$('.jCarousel').jCarouselLite();
4

1 回答 1

1

我无法进入页面，但您似乎错过了对 .jCarousel 的调用当您删除轮播的所有内容 ($('.jCarousel').html('');) 并添加新内容时，jcarousel 的所有事件和一切都消失了。所以：

<script type="text/javascript">
    $('#nuestra_tienda_show').click(function()
    {
        $('.jCarousel').html(''); // Here, you loose all jcarousel events, etc
        $('<ul><li><div id="clickable"><img src="img/Escaparates_2011/img1.jpg" alt="Dormitorio azul turquesa." width="100" height="100"></img></div></li></ul>')
         .prependTo('jCarousel'); // this element is unknown to jcarousel
        $('.jCarousel').jCarousell(); // Initialize the carousel again
        $('#galeria_seleccionada').html('Nuestra tienda 2011');

    });
</script>
于 2012-06-28T17:08:01.703 回答