我有個問題。我創建了一個具有以下結構的頁面。
<div class="cover-header">
<span class="box-header checked">test1</span>
<span class="box-header">test2</span>
<span class="box-header">test3</span>
<span class="box-header">test4</span>
<span class="box-header">test5</span>
<span class="box-header">test6</span>
<span class="box-header">test7</span>
</div>
當我滾動頁面時，一個名為“red”的類將被添加到具有“checked”類的框中，我希望名為“checked”的類移動到下一個框。（它將從現有框中洗掉）它將像下面的代碼一樣更改。
<div class="cover-header">
<span class="box-header red">test1</span>
<span class="box-header checked">test2</span>
<span class="box-header">test3</span>
<span class="box-header">test4</span>
<span class="box-header">test5</span>
<span class="box-header">test6</span>
<span class="box-header">test7</span>
</div>
我試過'next()'和'after()'，但它不適用。如果我只使用next()，該類將被添加到所有div...我只想添加到下一個div。所以，一起使用'closest（）'，但它不適用。
$('.box-header.checked').next().closest().addClass('checked');
這應該一直持續到最后一個 div。因此，如果您滾動到最后，它將如下面的代碼所示。
<div class="cover-header">
<span class="box-header red">test1</span>
<span class="box-header red">test2</span>
<span class="box-header red">test3</span>
<span class="box-header red">test4</span>
<span class="box-header red">test5</span>
<span class="box-header red">test6</span>
<span class="box-header checked">test7</span>
</div>
uj5u.com熱心網友回復：
我希望這段代碼能解決你的問題
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$('.cover-header').scroll(function(){
$('.cover-header>span').each(function(){
var x = $(this).position();
if(x.top < 10){
console.log(x.top);
$('.box-header').removeClass('red').removeClass('checked');
$(this).addClass('red').next().addClass('checked');
}
});
});
</script>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/443370.html
標籤：jQuery