js获取自定义属性，报错 Uncaught TypeError: element.attr is not a function

我这是一个滑动导航栏的页面，滑动导航栏的参考页面在

https://blog.csdn.net/Gaia_qi/article/details/79528832

报错原因

attr("name") 是jquery对象的方法，原生js的方法是getAttribute()。
代码可以写成$(element).attr("name")或者element.getAttribute("name")。

页面中，添加自定义属性

<section class="swiper-container">
    <div class="swiper-wrapper">
        <div data-id="1" class="swiper-slide active">全部</div>
        <div data-id="2" class="swiper-slide">电气自动</div>
        <div data-id="3" class="swiper-slide">医药医学</div>
        <div data-id="4" class="swiper-slide">机械加工</div>
        <div data-id="5" class="swiper-slide">化学化工</div>
        <div data-id="6" class="swiper-slide">电子信息</div>
        <div data-id="7" class="swiper-slide">安全防护</div>
        <div data-id="8" class="swiper-slide">新能源</div>
        <div data-id="9" class="swiper-slide">仪器仪表</div>

    </div>
</section>

js 中获取 当前点击 div 的 id

<script>
var swiper = new Swiper('.swiper-container', {
    slidesPerView: 6,
    spaceBetween: 1,
    pagination: {
        el: '.swiper-pagination',
        clickable: true,
    },
});
</script>

<script type="text/javascript">
$(document).ready(function(){
    $('.swiper-container>.swiper-wrapper>.swiper-slide').click(function(){

        $(this).addClass("active").siblings().removeClass("active");

        // 获取自定义id，传到ajax，使用 getAttribute 就报那个错误
        
        var id = $(this).attr('data-id');
        
        console.log(id);
        // 返回数据，再反映到页面
        $.ajax({
            url: "",
            async: false,
            dataType: "json",
            success: function(data){
                rStr = data[0].nickname;
          alert(data);
            }
        });



    });
});