在滾動條上從div獲取兄弟對

Question

我有一個時間表，需要如果class沒有激活，以便爲從活動年份移動的每一對都更改css。情況就是這樣。

... 
n-4 
n-3 
n-2 
n-1 
n (active year) 
n+1 
n+2 
n+3 
n+4 
... 

這是我嘗試過但推移指數

$frame.sly(`on`, `active`, function (event) { 
$(`.years.active`).css(`opacity`,`1`); 
$(`.years.active`).siblings().eq(1).css(`opacity`,0.9`); 
$(`.years.active`).siblings().eq(2).css(`opacity`,`0.8`); 
$(`.years.active`).siblings().eq(3).css(`opacity`,`0.7`); 
$(`.years.active`).siblings().eq(4).css(`opacity`,`0.6`); 
} 

HTML

<div class="pagespan container"> 
    <div class="wrap"> 
     <div class="frame" id="forcecentered"> 
      <ul class="clearfix"> 
       <li data-target="1997" class="years">1997</li> 
       <li data-target="2009" class="years">2009</li> 
       <li data-target="2010" class="years">2010</li> 
       <li data-target="2013" class="years active">2013</li> 
       <li data-target="2015" class="years">2015</li> 
       <li data-target="2016" class="years">2016</li> 
       <li data-target="2017" class="years">2017</li> 
      </ul> 
     </div> 
    </div> 
</div> 

任何人都知道，這可能做的方式。也許有數據目標？ 我想才達到使從活動裏的字體和不透明每一步都是小

Answer 1

使用屬性來跟蹤層次：

function moveForward() { 
    $(「.before」).each(function() { 
     $(this).attr(「data-pos」, $(this).attr(「data-pos」) + 1); 
    } 
    $(「.after」).each(function() { 
     $(this).attr(「data-pos」, $(this).attr(「data-pos」) - 1); 
    } 
    $(「.active」).toggleClass(「active before」).attr(「data-pos」, 1); 
    $(「.after[data-pos=‘0’]」).toggleClass(「after active」); 
} 

function moveBack() { 
    $(「.before」).each(function() { 
     $(this).attr(「data-pos」, $(this).attr(「data-pos」) - 1); 
    } 
    $(「.after」).each(function() { 
     $(this).attr(「data-pos」, $(this).attr(「data-pos」) + 1); 
    } 
    $(「.active」).toggleClass(「active after」).attr(「data-pos」, 1); 
    $(「.before[data-pos=‘0’]」).toggleClass(「before active」); 
} 

當然，你可以把這些多次（或修改他們）通過多個條目進行更改，並跟蹤變量中的位置以允許「定位」功能。

然後你的CSS：

/* any pos greater than 9 */ 
.before, .after { 
    opacity: 0; 
} 

/* these selectors should be sufficient because ‘.active’ will always have no ‘data-pos’ or will have a ‘data-pos’ of 0 */ 
[data-pos=‘1’] { 
    opacity: 0.9; 
} 

[data-pos=‘2’] { 
    opacity: 0.8; 
} 
/* values 3-9 here */ 

，並確保您的HTML是預先設定的正確，例如

<div class=「before」 data-pos=「2」/> 
<div class=「before」 data-pos=「1」/> 
<div class=「active」/> 
<div class=「after」 data-pos=「1」/> 
<div class=「after」 data-pos=「2」/> 
<div class=「after」 data-pos=「3」/> 
<div class=「after」 data-pos=「4」/> 

Answer 2

如果我理解正確，您想從活動一到年底降低李 S中的不透明度。如果是這種情況的片段是：

var elements = $('.years.active').nextAll('.years').andSelf(); 
 
var step = 1/(1 + elements.length); 
 
var startValue = 1; 
 
elements.each(function(idx, ele) { 
 
    startValue = startValue - 0.1; 
 
    console.log('New opacity is (li:' + ele.textContent + '):' + startValue); 
 
    $(ele).css('opacity',startValue); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<div class="pagespan container"> 
 
    <div class="wrap"> 
 
     <div class="frame" id="forcecentered"> 
 
      <ul class="clearfix"> 
 
       <li data-target="1997" class="years">1997</li> 
 
       <li data-target="2009" class="years">2009</li> 
 
       <li data-target="2010" class="years">2010</li> 
 
       <li data-target="2013" class="years active">2013</li> 
 
       <li data-target="2015" class="years">2015</li> 
 
       <li data-target="2016" class="years">2016</li> 
 
       <li data-target="2017" class="years">2017</li> 
 
      </ul> 
 
     </div> 
 
    </div> 
 
</div>