D3選擇div和動態更新CSS類

我想製作一個顯示過去5天的交互式日曆對象。它由html <li>和<span>元素組成。我意識到jquery可能是解決dom操作的常規方法，但我有動機使用d3方法。代碼本身非常清晰，但我還將包含一個簡要的事件摘要，說明我正在嘗試做什麼。D3選擇div和動態更新CSS類

d3.selectAll('li').on('click', function(d) { 
 
    var array = d3.select(this)[0]; 
 
    var tab = array[0]; 
 
    var tabClass = tab.className.split(" ")[1]; 
 
    var priorTab = d3.selectAll('.tab0'); 
 
    var tabIndex = [].indexOf.call(tab.parentNode.children, tab); 
 
    priorTab.classed('tab0', false); 
 
    d3.select(tab).classed(tabClass, false); 
 
    d3.select(tab).classed('tab0', true); 
 
    d3.selectAll('li:not(.tab0)').each(function() { 
 
    var tempArray = d3.select(this)[0]; 
 
    var tempTab = tempArray[0]; 
 
    var tempTabClass = tempTab.className.split(" ")[1]; 
 
    var tempIndex = [].indexOf.call(tempTab.parentNode.children, tempTab); 
 
    var tempIndexDifference = Math.abs(tabIndex-tempIndex); 
 
    d3.select(tempTab).classed(('tab'+tempIndexDifference), true); 
 
    }); 
 
});

.tab0 { 
 
    color:#77b4c9; 
 
    box-shadow: none; 
 
    transition: all .2s linear; 
 
} 
 

 
.tab0 span:first-of-type { 
 
    background-color: #fff; 
 
    box-shadow: none; 
 
    font-size: 50px; 
 
    margin-top: 15px; 
 
    display:block; 
 
} 
 

 
.tab1 { 
 
    background-color: #cbdeea; 
 
    color: #fff; 
 
} 
 

 
.tab2 { 
 
    background-color: #a6cdd9; 
 
    color: #fff; 
 
} 
 

 
.tab3 { 
 
    background-color: #77b4c9; 
 
    color: #fff; 
 
} 
 

 
.tab4 { 
 
    background-color: #519ab6; 
 
    color: #fff; 
 
} 
 

 
.contentTitleSize { 
 
    font-size: 50px; 
 
} 
 

 
.contentTitle { 
 
    color: #000; 
 
    height: 73px; 
 
    margin-top: 27px; 
 
    font-family: Play; 
 
} 
 

 
.contentTitle, .contentArea { 
 
    display:inline-block; 
 
} 
 

 
.contentArea { 
 
    height:320px; 
 
    width:312px; 
 
    margin-left: 25px; 
 
    overflow: hidden; 
 
} 
 

 
.subheading { 
 
    font-size: 18px; 
 
    height: 20px; 
 
    font-family: Play; 
 
    color: #77b4c9; 
 
    margin-top: 14px; 
 
    margin-bottom: 24px; 
 
} 
 

 
.outerContainer { 
 
    width:566px; 
 
    display:inline-block; 
 
    vertical-align: top; 
 
    margin-right: 27px; 
 
} 
 

 
section { 
 
    display:block; 
 
} 
 

 
*, :after, :before { 
 
    -webkit-box-sizing: inherit; 
 
    box-sizing: inherit; 
 
} 
 

 
*, :after, :before { 
 
    -webkit-box-sizing: inherit; 
 
    box-sizing: inherit; 
 
} 
 

 
::selection { 
 
    background: #b3d4fc; 
 
    text-shadow: none; 
 
} 
 

 

 
.tabPanel { 
 
    display:inline-block; 
 
    vertical-align: top; 
 
    width:160px; 
 
    margin:0; 
 
    padding:0; 
 
} 
 

 
ul { 
 
    list-style-type: disc; 
 
    -webkit-margin-before: 1em; 
 
    -webkit-margin-after: 1em; 
 
    -webkit-margin-start: 0px; 
 
    -webkit-margin-end: 0px; 
 
    -webkit-padding-start: 40px; 
 
} 
 

 
li { 
 
    display:list-item; 
 
} 
 

 
.listTabs { 
 
    display:block; 
 
    list-style: none; 
 
    font-size: 22px; 
 
    font-family: Play; 
 
    text-align: center; 
 
    padding-top: 12px; 
 
    padding-bottom: 13px; 
 
    cursor: pointer; 
 
    -webkit-box-shadow: inset 0 1px 2.5px 0 rgba(0,0,0,.11); 
 
    box-shadow: inset 0 1px 2.5px 0 rgba(0,0,0,.11); 
 
} 
 

 
.container { 
 
    height:320px; 
 
    width: 100%; 
 
    margin-bottom:24px; 
 
    border-radius: 2px; 
 
    background-color: #fff; 
 
    font-family: Roboto-Regular,serif; 
 
    line-height: 1; 
 
    box-shadow: 0 2px 5px 0 rgba(0,0,0,.1) 
 
} 
 

 
.bottomButton { 
 
    height: 61px; 
 
    background-color: #327ca3; 
 
    border-radius: 3px; 
 
    font-size: 20px; 
 
    font-family: Play; 
 
    letter-spacing: .4px; 
 
    color: #fff; 
 
    text-align: center; 
 
    line-height: 61px; 
 
    cursor: pointer; 
 
}

<script src="https://d3js.org/d3.v3.min.js"> 
 
    <div class="outerContainer"> 
 
     <section class="container"> 
 
      <ul class="tabPanel"> 
 
       <li class="listTabs tab0" role="button"> 
 
        <span>02</span> 
 
        <span>OCT</span> 
 
       </li> 
 
       <li class="listTabs tab1" role="button"> 
 
        <span>01</span> 
 
        <span>OCT</span> 
 
       </li> 
 
       <li class="listTabs tab2" role="button"> 
 
        <span>30</span> 
 
        <span>SEP</span> 
 
       </li> 
 
       <li class="listTabs tab3" role="button"> 
 
        <span>29</span> 
 
        <span>SEP</span> 
 
       </li> 
 
       <li class="listTabs tab4" role="button"> 
 
        <span>28</span> 
 
        <span>SEP</span> 
 
       </li> 
 
      </ul> 
 
      <div class="contentArea"> 
 
       <a class="contentTitle contentTitleSize">Content Area</a> 
 
       <div class="subheading"> 
 
        <span> 
 
        <strong>First</strong> 
 
        "Second and Third"::after 
 
        </span> 
 
        <span>more info</span> 
 
       </div> 
 
       <div class="details"> 
 
        <p>lots of details</p> 
 
       </div> 
 
     </section> 
 
     <div> 
 
      <div class="bottomButton"> 
 
      Click Me</div> 
 
      </div> 
 
     </div>

用戶點擊其然後被分配一個類，以表明它是有源標籤（.tab0在我的代碼）
我有4個以外的標籤課程範圍從.tab1一直到.tab4。這些類有不同的background-color。命名方案基於選項卡距活動選項卡多遠。 .tab1相鄰（頂部或底部）.tab4很遙遠。
我再選擇其他選項卡，並使用.each()申請單獨background-color基於其關係位置，活動選項卡的標籤。這是通過給它一個新的.tabx類來實現的。因此，例如，如果您點擊中間的第三個標籤（[].indexOf.call(tab.parentNode.children, tab)等於2，那麼它上面的標籤和下面的標籤將具有類tab1 - 因爲0-1的絕對值爲1）。

儘管我仔細地嘗試修改它，但我無法得到它的工作。沒有任何選項卡用新顏色更新，我無法理解爲什麼開發工具顯示索引正在正確計算每個時間

問題：如何讓這個動態顏色更新起作用？換句話說，無論用戶點擊哪個標籤都是白色，其他所有標籤都會更新根據它們與活動選項卡的關係位置，吃掉background-color。

澄清

爲了澄清，這是不一樣的，從舊的活動標籤交換樣式新，我的意思是更新所有background-color S上的標籤到一個新的價值基礎上走多遠他們離開新的活動標籤。例如，直接位於新活動選項卡頂部和底部的選項卡將是最接近的，因此他們應該得到類：.tab1。遠離兩個選項卡的選項卡將獲得.tab2等等。請注意，初始狀態的第一個選項卡是活動選項卡，因此只有一個類別爲.tab1的選項卡，因爲上面不能有任何選項卡。

來源

2017-10-10 Arash Howaida

您的片段沒有運行。它應該是'

相關問題