我这是一个滑动导航栏的页面,滑动导航栏的参考页面在
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);
}
});
});
});