Question

我对编码非常陌生，如果我的术语不准确，请道歉。我建了一个带引导转盘的网站。我希望标题显示在单独的列中。我找到了这个漂亮的代码：

$('.carousel').carousel();
var caption = $('div.item:nth-child(1) .carousel-caption');
$('#right').html(caption.html());
caption.css('display','none');
$(".carousel").on('slide.bs.carousel', function(evt) {

    var caption = $('div.item:nth-child(' + ($(evt.relatedTarget).index()+1) + ') .carousel-caption');
    $('#right').html(caption.html());
    caption.css('display','none');
});

感谢大家的代码：How to place Bootstrap Carousel image captions outside the carousel div?

然后我用简单的方式在我想要的位置显示标题：

<p id="right"></p>

我的问题是我还要在网址上添加#hash，以便我可以从我网站上的其他网页定位轮播中的特定项目（例如，第4项有网址www.mysite.com＃ 4以便我可以链接到该特定项目）。附加散列的代码也会将项目设置为活动状态。供参考，它在这里：

$(document).ready(function() {  

    var url = document.location.toString();
    var totalItems = $('.item').length;

    //Initiate carousel
    $('.carousel').carousel({
        interval: false
    })

    $('.carousel').on('slid.bs.carousel', function () {

        var currentIndex = $('div.active').index() + 1;

        //Update pager-text
        $('.pager-text').text(''+currentIndex+'/'+totalItems+'');

        // Update location based on slide (index is 0-based)
        window.location.hash = "#"+ parseInt($('.carousel .carousel-inner .item.active').index()+1);
    });


    if (url.match('#')) {
        // Clear active item
        $('.carousel .carousel-inner .item.active').removeClass('active');

        // Activate item number #hash
        $('.carousel-inner div:nth-child(' + url.split('#')[1] + ')').addClass('active');

        //Update pager-text
        $('.pager-text').text(''+url.split('#')[1]+'/'+totalItems+'');

    }

});

h / t：Update the current number of slide when jumping to specific item - Bootstrap 3 Carousel

但是，标题始终与轮播列表中的第一项匹配（这是唯一一个具有class =＆＃34; item active＆＃34;在html中，否则轮播将不显示）。如何让页面显示我想要定位的特定URL哈希的标题？例如，如果我希望它匹配轮播项目的标题，请访问：www.myurl.com＃4

谢谢！我很乐意在github完成后分享所有代码，以便其他人可以使用它。

基于url哈希的轮播标题

0 个答案: