Question

我有滑块问题。当我第一次加载我的网页时，它会显示带有一些图像的滑块。我有一些链接可以更改要显示的图像，所以当我点击时，我想显示其他的滑块。问题是，当我点击新链接时，它不会使用jquery函数来格式化滑块。

在这里，我粘贴一些代码，以便你可以弄明白：

<div class="contenidor_escaparates_2011">
    <div id="contenidor_slider" class="containerGaleria">
        <ul id="slideshow">
              <li><img src="img/Escaparates_2011/img1.jpg" alt="Dormitorio azul turquesa." /></li>
              <li><img src="img/Escaparates_2011/img2.jpg" alt="Escaparate Agosto 2011." /></li>
              <li><img src="img/Escaparates_2011/img3.jpg" alt="Escaparate Enero 2011." /></li>
</ul> </div></div>

然后是jquery：

$(document).ready(function()
{
    var timeout, manualMode = false,

            $slideshow = $('#slideshow'),
    $items = $slideshow.find('li').hide(),
    total = $items.length,
    getItem = function($item, trav) {
        var $returnItem = $item[trav]();
        return $returnItem.length ?
            $returnItem :
            $items[(trav == 'next') ? 'first' : 'last']();
    },

    showItem = function($currentItem, $itemToShow) {
        var $itemToShow =
            $itemToShow || getItem($currentItem,'next');

        $currentItem.fadeOut(300, function() {
            $itemToShow.fadeIn(300, fadeCallback);
        });
    },

    fadeCallback = function() {
        if (manualMode) { return; }

        var $this = $(this),
            $next = getItem($this, 'next'),
            num = $this.prevAll().length + 1;


        // set the timeout for showing
        // the next item in 5 seconds
        timeout = setTimeout(function() {
            showItem($this, $next);
        }, 3000);
    },

    handleBtnClick = function(e) {
        clearTimeout(timeout);

        manualMode = true;

        var $currentItem = $items.filter(':visible'),
            $itemToShow = getItem($currentItem, e.data.direction);

        showItem($currentItem, $itemToShow);
    };

    $items.eq(0).fadeIn(500, fadeCallback);

});

这在我第一次加载页面时非常有用，但是当我用这个更改内容时：

<script type="text/>
$('#nuestra_tienda_show').click(function()
    {
     $('.containerGaleria').html('');
     $('<ul id="slideshow"><li><img src="img/Escaparates_2011/img1.jpg" alt="Dormitorio azul turquesa." /></li><li><img src="img/Escaparates_2011/img2.jpg" alt="Escaparate Agosto 2011." /></li><li><img src="img/Escaparates_2011/img3.jpg" alt="Escaparate Enero 2011." /></li><li><img src="img/Escaparates_2011/img4.jpg" alt="Escaparate Junio 2011." /></li><li><img src="img/Escaparates_2011/img5.jpg" alt="" /></li><li><img src="img/Escaparates_2011/img6.jpg" alt="" /></li><li><img src="img/Escaparates_2011/img7.jpg" alt="" /></li><li><img src="img/Escaparates_2011/img8.jpg" alt="" /></li><li><img src="img/Escaparates_2011/img9.jpg" alt="" /></li><li><img src="img/Escaparates_2011/img10.jpg" alt="" /></li><li><img src="img/Escaparates_2011/img11.jpg" alt="" /></li><li><img src="img/Escaparates_2011/img12.jpg" alt="" /></li><li><img src="img/Escaparates_2011/img13.jpg" alt="" /></li><li><img src="img/Escaparates_2011/img14.jpg" alt="" /></li></ul> ')
         .prependTo('.containerGaleria');
         $('#galeria_seleccionada').html('Nuestra tienda 2011');
         location.reload();
         });
</script>

所以基本上，我做的是，在某个链接上的onclick（）事件之后，我更改了div的html内容，但显然，它不使用jquery，因为它最初没有加载。关于如何解决这个问题的任何想法？

如果我使用location.reload（）;它显示了我里面的第一件物品，所以它对我不起作用......

编辑：
等等，我编辑了jsFiddle ......

Answer 1

您需要为幻灯片显示创建一个init方法，并在需要时调用它。

我想看看这个js是如何设置的，所以我会忽略它并发布我将如何处理它：

$(document).ready(function(){
    slideshow.init();

    $('#nuestra_tienda_show').on('click', function()
    {
        $('.containerGaleria').html('');
        $('<ul id="slideshow"><li><img src="img/Escaparates_2011/img1.jpg" alt="Dormitorio azul turquesa." /></li><li><img src="img/Escaparates_2011/img2.jpg" alt="Escaparate Agosto 2011." /></li><li><img src="img/Escaparates_2011/img3.jpg" alt="Escaparate Enero 2011." /></li><li><img src="img/Escaparates_2011/img4.jpg" alt="Escaparate Junio 2011." /></li><li><img src="img/Escaparates_2011/img5.jpg" alt="" /></li><li><img src="img/Escaparates_2011/img6.jpg" alt="" /></li><li><img src="img/Escaparates_2011/img7.jpg" alt="" /></li><li><img src="img/Escaparates_2011/img8.jpg" alt="" /></li><li><img src="img/Escaparates_2011/img9.jpg" alt="" /></li><li><img src="img/Escaparates_2011/img10.jpg" alt="" /></li><li><img src="img/Escaparates_2011/img11.jpg" alt="" /></li><li><img src="img/Escaparates_2011/img12.jpg" alt="" /></li><li><img src="img/Escaparates_2011/img13.jpg" alt="" /></li><li><img src="img/Escaparates_2011/img14.jpg" alt="" /></li></ul> ')
        .prependTo('.containerGaleria');
        $('#galeria_seleccionada').html('Nuestra tienda 2011');
        slideshow.init();
    });
});

var slideshow = {
    timeout: null,
    manualMode: false,
    total: 0,
    init: function(){
        clearTimeout(this.timeout);
        var items = $('#slideshow').find('li').hide();
        this.total = items.length;
        items.eq(0).fadeIn(500, this.fadeCallback);
    },
    getItem: function(item, trav) {
        var returnItem = item[trav]();
        return returnItem.length ?
            returnItem :
            items[(trav == 'next') ? 'first' : 'last']();
    },
    showItem: function(currentItem, itemToShow) {
        var itemToShow =
            itemToShow || this.getItem(currentItem,'next');

        currentItem.fadeOut(300, function() {
            itemToShow.fadeIn(300, this.fadeCallback);
        });
    },
    fadeCallback: function() {
        if (manualMode) { return; }

        var $this = $(this),
            next = getItem($this, 'next'),
            num = $this.prevAll().length + 1;

        // set the timeout for showing
        // the next item in 5 seconds
        timeout = setTimeout(function() {
            this.showItem($this, next);
        }, 3000);
    },
    handleBtnClick: function(e) {
        clearTimeout(this.timeout);

        this.manualMode = true;

        var currentItem = items.filter(':visible'),
            itemToShow = this.getItem(currentItem, e.data.direction);

        this.showItem(currentItem, itemToShow);
    },
    handleBtnClick: function(e) {
        clearTimeout(this.timeout);

        this.manualMode = true;

        var currentItem = items.filter(':visible'),
            itemToShow = this.getItem(currentItem, e.data.direction);

        this.showItem(currentItem, itemToShow);
    };
};

然后，当您想要重新评估幻灯片显示内容时，您只需致电slideshow.init()。

我没有对此进行彻底的审核，但总的想法是将这个庞大的变量链变成一个单独的js对象并包含整个事物。

我无法理解为什么你会在点击功能中写这样的幻灯片的内容。你正在擦除容器的html，创建元素，然后将它们添加到容器中，并反复用相同的字符串重写标题id。为什么不直接将幻灯片的html设置为新图像？

$('#slideshow').html('<li><img src="img/Escaparates_2011/img1.jpg" alt="Dormitorio azul turquesa." /></li><li><img src="img/Escaparates_2011/img2.jpg" alt="Escaparate Agosto 2011." /></li><li><img src="img/Escaparates_2011/img3.jpg" alt="Escaparate Enero 2011." /></li><li><img src="img/Escaparates_2011/img4.jpg" alt="Escaparate Junio 2011." /></li><li><img src="img/Escaparates_2011/img5.jpg" alt="" /></li><li><img src="img/Escaparates_2011/img6.jpg" alt="" /></li><li><img src="img/Escaparates_2011/img7.jpg" alt="" /></li><li><img src="img/Escaparates_2011/img8.jpg" alt="" /></li><li><img src="img/Escaparates_2011/img9.jpg" alt="" /></li><li><img src="img/Escaparates_2011/img10.jpg" alt="" /></li><li><img src="img/Escaparates_2011/img11.jpg" alt="" /></li><li><img src="img/Escaparates_2011/img12.jpg" alt="" /></li><li><img src="img/Escaparates_2011/img13.jpg" alt="" /></li><li><img src="img/Escaparates_2011/img14.jpg" alt="" /></li>');

如何重新加载javascript而不是页面

1 个答案: