gpt4 book ai didi

jquery - 面临 jQuery 链定位问题

转载 作者:行者123 更新时间:2023-12-01 04:01:21 28 4
gpt4 key购买 nike

您能看一下this demo吗?让我知道为什么我无法定位所选 anchor 链接的下一个和上一个 section 的 id?

为了获得下一个,我尝试了所有

 var target = $(this).next('section').attr('id');
var target = $(this).parent().parent().next('section').attr('id');
var target = $(this).parent().next('section').attr('id');
var target = $(this).parent().find('section').attr('id');

但无法获取所选.next-slide的下一节的ID

$(function(){
$(".next-slide").on('click', function(event) {
event.preventDefault();
var target = $(this).next('section').attr('id');
target = "#"+target;
console.log(target);
$('html, body').animate({
scrollTop: $(target).offset().top
}, 800, function(){
});
});
});

最佳答案

$.next()定位下一个相邻元素,并且没有 section就在 .next-slide 旁边您页面上的链接。瞄准下一个section相对于您点击的链接,您需要找到父链接 section链接,然后定位下一个 section通过$.next()

您可以找到父项section使用 $.closest() 的链接,它返回与您的选择器匹配的第一个祖先,然后使用 $.next('section')section 为目标在那之后。

$(function(){
$(".next-slide").on('click', function(event) {
event.preventDefault();
var target = $(this).closest('section').next('section').attr('id');
target = "#"+target;
console.log(target);
$('html, body').animate({
scrollTop: $(target).offset().top
}, 800, function(){
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="section1">
<div class="col-md-12 box" id="box-1">
<div class="cover">
<img src='http://placehold.it/50x50/f3f5f6/f3f5f6' />
</div>
<div class="cover"></div>
<div class="col-md-12 up-pointer">
</div>
<div class="col-md-12 down-pointer">
<a role="button" class="pointer next-slide">
<img src="http://www.caapc.ca/wp-content/uploads/2016/09/map-marker-2-xxl.png" class="img-responsive" width="40px" height="40px" />
</a>
</div>
</div>
</section>
<section id="section2">
<div class="col-md-12 box" id="box-1">
<div class="cover">
<img src='http://placehold.it/50x50/f3f5f6/f3f5f6' />
</div>
<div class="cover"></div>
<div class="col-md-12 up-pointer">
</div>
<div class="col-md-12 down-pointer">
<a role="button" class="pointer next-slide">
<img src="http://www.caapc.ca/wp-content/uploads/2016/09/map-marker-2-xxl.png" class="img-responsive" width="40px" height="40px" />
</a>
</div>
</div>
</section>
<section id="section3">
<div class="col-md-12 box" id="box-1">
<div class="cover">
<img src='http://placehold.it/50x50/f3f5f6/f3f5f6' />
</div>
<div class="cover"></div>
<div class="col-md-12 up-pointer">
</div>
<div class="col-md-12 down-pointer">
<a role="button" class="pointer next-slide">
<img src="http://www.caapc.ca/wp-content/uploads/2016/09/map-marker-2-xxl.png" class="img-responsive" width="40px" height="40px" />
</a>
</div>
</div>
</section>
<section id="section4">
<div class="col-md-12 box" id="box-1">
<div class="cover">
<img src='http://placehold.it/50x50/f3f5f6/f3f5f6' />
</div>
<div class="cover"></div>
<div class="col-md-12 up-pointer">
</div>
<div class="col-md-12 down-pointer">
<a role="button" class="pointer next-slide">
<img src="http://www.caapc.ca/wp-content/uploads/2016/09/map-marker-2-xxl.png" class="img-responsive" width="40px" height="40px" />
</a>
</div>
</div>
</section>

关于jquery - 面临 jQuery 链定位问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42464302/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com