在滚动条上从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>