基于url哈希启动bxSlider

Question

我希望我的bXslider幻灯片在加载时根据url中的哈希进行更改。如果我的url是www.website.com/#slide1，它应该显示第一张幻灯片；如果我的url是www.webwebsite.com/#slide2，它应该会显示第二张幻灯片。

我能够通过使用以下jQuery代码使其工作：

if(typeof $.fn.bxSlider !== "undefined"){
            var mainSlider = $('#homepage .bxslider').bxSlider({
                mode:'fade',
                pager: true,
            });
            if(location.hash === "#slide1") {
                mainSlider.goToSlide(1);
            } else if(location.hash === "#slide2"){
                mainSlider.goToSlide(2);
            } else if(location.hash === "#slide3"){
                mainSlider.goToSlide(3);
            } else if(location.hash === "#slide4"){
                mainSlider.goToSlide(4);
            } else if(location.hash === "#slide5"){
                mainSlider.goToSlide(5);
            } else if(location.hash === "#slide6"){
                mainSlider.goToSlide(6);
            } else if(location.hash === "#slide7"){
                mainSlider.goToSlide(7);
            } else if(location.hash === "#slide8"){
                mainSlider.goToSlide(8);
            } else if(location.hash === "#slide9"){
                mainSlider.goToSlide(9);
            } else if(location.hash === "#slide10"){
                mainSlider.goToSlide(10);
            } else if(location.hash === "#slide11"){
                mainSlider.goToSlide(11);
            } else if(location.hash === "#slide12"){
                mainSlider.goToSlide(12);
            } else if(location.hash === "#slide13"){
                mainSlider.goToSlide(13);
            } else if(location.hash === "#slide14"){
                mainSlider.goToSlide(14);
            } 
        }

问题是，只有当hash为#slide1或#slide2时，它才有效。我的代码有问题吗？有更短的方法吗？

此外，我使用下面的代码为我所有的.bx寻呼机项目元素添加了不同的id：

$('#pagination .bx-pager-item').each(function(i) {
   $(this).attr('id', 'slide'+(i+1));
});

如何将id作为哈希添加到href的末尾，以便当您单击id为slide1的第一个.bx寻呼机项元素时，它会将您带到URL末尾具有#slide1哈希的另一个页面？

Answer 1

问题是，它只在散列#1和#2时工作。有吗我的代码有问题吗？有更短的方法吗？

文档中说，实例化滑块时可以传递startSlide选项。因此，您的代码可能看起来像这样：

if (typeof $.fn.bxSlider !== "undefined") {
  // Check if '#slide' is present in the hash.
  // Replace it with an empty string so we have whatever comes after left.
  // Convert that to an integer for the startSlide option
  var slideId = (location.hash.indexOf('#slide') > -1) ? parseInt(location.hash.replace('#slide', ''), 10) : null;
  if (slideId) {
    $('#homepage .bxslider').bxSlider({
      mode:'fade',
      pager: true,
      startSlide: slideId - 1,
    });
  }
}

但它并不是完全防弹的。您可以添加更多的检查以确保某人不会成功进入#slide10abc。在这种情况下，parseInt不会抛出正确的索引：）

如何将id作为哈希添加到href的末尾，以便在单击id为slide1it的第一个.bx寻呼机项目元素将带您转到另一个页面，页面末尾有#slide1的散列URL？

我不太确定我是否正确理解你，但我认为你可以根据你正在循环的HTML来做这样的事情：

$('#pagination .bx-pager-item').each(function(i) {
   var $this = $(this);
   var currentHref = $this.attr('href');
   var newHref = currentHref + '/#slide' + (i+1);
   $this.attr('href', newHref);
});

同样，您可以进行一些检查，以确保您设置的新href实际上是有效/正确的URL。例如，检查当前href末尾的"/"，从而避免添加两次。

希望以上内容能让你更接近目标。如果没有，请在评论中要求进一步解释。

---

注释答案：在回调中组合两段代码

If you want to manipulate the slides after bxSlider is loaded, you could use the ```onSliderLoad``` callback, which is passed to the options object for the slider. It would look something like this:
if (typeof $.fn.bxSlider !== "undefined") {
  var slideId = (location.hash.indexOf('#slide') > -1) ? parseInt(location.hash.replace('#slide', ''), 10) : null;
  if (slideId) {
    $('#homepage .bxslider').bxSlider({
      mode:'fade',
      pager: true,
      startSlide: slideId - 1,
      onSliderLoad: function() {
        $('#pagination .bx-pager-item').each(function(i) {
           var $this = $(this);
           var currentHref = $this.attr('href');
           var newHref = currentHref + '/#slide' + (i+1);
           $this.attr('href', newHref);
        });
      }
    });
  }
}