jQuery单击带有时间戳的nav-pills中的下一个锚标记

Question

我正在尝试使用jquery单击下一个导航链接。我正在将Bootstrap 4与Jquery 3.4.1一起使用。我正在使用垂直导航药丸，我希望在一段时间后激活它。

<!-- Tabs nav -->
        <div class="nav nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
            <a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">
            <div class="categoryBox">
                <img src="https://dummyimage.com/240x150/ff6500/fff">
                <p>Real Estate</p>
            </div>    
            </a>

            <a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">
            <div class="categoryBox">
                <img src="https://dummyimage.com/240x150/ff6500/fff">
                <p>eCommerce</p>
            </div>
            </a>

            <a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">
            <div class="categoryBox">
                <img src="https://dummyimage.com/240x150/ff6500/fff">
                <p>Fashion Photo Editing</p>
            </div>
            </a>

            <a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">
            <div class="categoryBox">
                <img src="https://dummyimage.com/240x150/ff6500/fff">
                <p>Furniture Photo Editing</p>
            </div>
            </a>

        </div>

Jquery

jQuery(document).ready(function(e) {

    var click1 = 0;
    setInterval(function(){
        if(jQuery('.nav-pills .nav-link').length == click1)
        {
            click1 = 0; 
        }           
        jQuery('.nav-pills .nav-link:eq( '+click1+' ) a').trigger('click');
        click1 ++;  

    },500);

});

我不确定为什么它不起作用。请配合。

Answer 1

正如我评论中提到的，选择器未选择正确的元素。

jQuery('.nav-pills .nav-link:eq( '+click1+' ) a').trigger('click');

将使用.nav-link类选择元素的<a>标签。由于.nav-link元素本身就是<a>标签，因此您只需要将其从末尾删除：

jQuery(document).ready(function(e) {

    var click1 = 0;
    setInterval(function(){
        if(jQuery('.nav-pills .nav-link').length == click1)
        {
            click1 = 0; 
        }           
        jQuery('.nav-pills .nav-link:eq( '+click1+' )').trigger('click');
        click1 ++;  

    },500);

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="nav nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
            <a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">
            <div class="categoryBox">
                <img src="https://dummyimage.com/240x150/ff6500/fff">
                <p>Real Estate</p>
            </div>    
            </a>

            <a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">
            <div class="categoryBox">
                <img src="https://dummyimage.com/240x150/ff6500/fff">
                <p>eCommerce</p>
            </div>
            </a>

            <a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">
            <div class="categoryBox">
                <img src="https://dummyimage.com/240x150/ff6500/fff">
                <p>Fashion Photo Editing</p>
            </div>
            </a>

            <a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">
            <div class="categoryBox">
                <img src="https://dummyimage.com/240x150/ff6500/fff">
                <p>Furniture Photo Editing</p>
            </div>
            </a>

        </div>