图片加载不出来

当点击前后按钮,图片前进或后退,但不知道为什么图片加载不出来,我console.log($('#img').attr('src'));点一下,只在浏览器中闪一下,就没有了,我看了很久,觉得代码应该没有写错,请大家看下我到底是哪里错了,谢谢

https://img1.mukewang.com/5c4bf76d00015fed07270580.jpg

莫回无
浏览 945回答 1
1回答

慕盖茨4494581

1.你用<a>标签实现点击,但是<a>标签是超链接,所以会有一个默认跳转的动作,目的地址就是href属性;2.所以你每次点击后都会跳到那个href里的内容去,你这里是空白,所以会刷新页面;3.这里有两种解决办法4.第一种是给href加"#",这个是页面锚点的意思,你自己去查查,由于你页面没锚点,所以不会跳&nbsp; <p>&nbsp; &nbsp; <a href="#" class="btn" data-control="prev">上一页</a>&nbsp; &nbsp; <a href="#" class="btn" data-control="next">下一页</a>&nbsp; </p>5.第二种是阻止<a>标签的跳转行为,在点击事件的回调函数里写&nbsp; $('.btn').on('click', function() {&nbsp; &nbsp; if ('prev' === $(this).data('control')) { //上一张&nbsp; &nbsp; &nbsp; index = Math.max(0, --index);&nbsp; &nbsp; } else { //下一张&nbsp; &nbsp; &nbsp; index = Math.min(lens - 1, ++index);&nbsp; &nbsp; }&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; var a = $('#img').attr('src', 'images/' + img[index]);&nbsp; &nbsp; console.log($('#img').attr('src'));&nbsp; &nbsp; return false // 阻止跳转&nbsp; })6.第二种方法更标准的写法是e.preventDefault(),但我估计你没学到事件,所以先用上面的,后面你学到了想起来可以查一下
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript