javascript - 如何在事件发生的 div 外部获取数据属性 jQuery？

Question

我正在使用猫头鹰 slider ，并且每个视频类别在一页上有多个 slider 。所以我在 div 中添加了每个类别 slug。现在，在owl-next上单击“我想为单击的类别获取data-slug”。这是我尝试过的，但它只获取第一个类别，而不是其他类别。

Note: If you have in mind that why not adding the data-categoryslug inside owl-next div so owl carousel does these things on initializatio i have no idea how to add it in there.

js:

//获取猫头鹰狂欢节的下一个视频

        $('.blog-groups .blog-slider .owl-nav .owl-next').click(function(e){
            var categorySlug = $('.ajax-cate').data('categoryslug');
            console.log(categorySlug);
         });

HTML:

<div class="blog-groups">
    <div class="group-heading">

        <div class="blog-slider owl-lg-dot mb-none owl-theme owl-loaded owl-carousel owl-carousel-init" id="videoList">

            <div class="owl-controls">
                <div class="owl-nav">
                    <div class="owl-prev" style="display: block;">
                    </div>
                    <div class="owl-next" style=""></div>
                </div>
            </div>

        </div>
        <div class="group-seemore">
            <a class="ajax-cate" data-categoryslug="slug-is-here" href="/blog/category/slug-is-here" title="">
                See more
            </a>
        </div>

    </div>
</div>

Answer 1

试试这个代码。您需要使用 $(this) 将您尝试获取的元素与单击的元素相关联，然后使用 parents() 转到父标签，然后最后使用find()。

$('.owl-next').on('click', function() { 
    var categorySlug = $(this).parents('.blog-groups').find('.ajax-cate').data('categoryslug');
    console.log(categorySlug);
});