Javascript活動類僅適用於第一個列表項

我正在爲項目顯示在左側的項目組合的代碼工作。Javascript活動類僅適用於第一個列表項

活動類應該被添加到任何列表項的left div的類中，但是，當我將鼠標懸停在任何其他項目標題列表項上時，它只適用於第一個項目，我不知道這是爲什麼？下面是代碼：

HTML：

<ul class="project"> 
    <li class=project-title> 
    <div class="line-left"></div> 
    <p class="project-paragraph">Project title</p> 
    </li> 
    <li class=project-title> 
    <div class="line-left"></div> 
    <p class="project-paragraph">Project title</p> 
    </li> 
    <li class=project-title> 
    <div class="line-left"></div> 
    <p class="project-paragraph">Project title</p> 
    </li> 
    <li class=project-title> 
    <div class="line-left"></div> 
    <p class="project-paragraph">Project title</p> 
    </li> 
    <li class=project-title> 
    <div class="line-left"></div> 
    <p class="project-paragraph">Project title</p> 
    </li> 
    <li class=project-title> 
    <div class="line-left"></div> 
    <p class="project-paragraph"> 
     Project title</p> 
    </li> 
</ul>

CSS：

.project { 
    width: 170px; 
    font-family: Verdana, Geneva, sans-serif; 
    font-size: 14px; 
    color: #949394; 
} 

.project-title { 
    list-style: none; 
    cursor: pointer; 
} 

.project-paragraph { 
    display: inline-block; 
} 

.line-left { 
    border-top: 1px solid #2b2b2b; 
    width: 20px; 
    margin-top: 7px; 
    visibility: hidden; 
    display: inline-block; 
    margin-right: 10px; 
    padding-bottom: 4px; 
} 

.active { 
    visibility: visible; 
}

JAVASCRIPT：

document.querySelector('.project-title').addEventListener('mouseover', function() { 
    document.querySelector('.project-title .line-left').classList.add('active'); 
});

這裏是的jsfiddle還有：https://jsfiddle.net/andylyell/ynb7wxk2/

我會喜歡哈任何時候只剩下一個在線的活動課程，但我不確定如何執行此操作。任何幫助將不勝感激 - 謝謝！

來源

2017-02-25 Andy Lyell

''.querySelector（）'函數只返回它找到的第一個匹配元素。您可能需要'.querySelectorAll（）'，儘管如果您只是通過事件委派進行操作，它會更簡單。 – Pointy

你必須訂閱有「項目標題」類中的每個元素的所有元素。這是修改js給你的解決方案：

var activeClassName = 'active'; 
var elements = document.querySelectorAll('.project-title'); 
for (var i = 0; i < elements.length; i++) { 
    subscribeEvent(elements[i]); 
} 
function subscribeEvent(el) { 
    el.addEventListener('mouseover', function(e) { 
    var target = e.currentTarget; 
    if (containsClass(target.querySelector('.line-left'), activeClassName))  { 
     return; 
    } 
    setActiveEl(target); 
    }, false); 
} 
function setActiveEl(activeEl) { 
    for (var i = 0; i < elements.length; i++) { 
     var element = elements[i]; 
     if (element != activeEl) { 
     removeClass(element.querySelector('.line-left'), activeClassName); 
     } 
    } 
    addClass(activeEl.querySelector('.line-left'), activeClassName); 
} 
function addClass(el, className) { 
    el && el.classList.add(className); 
} 
function removeClass(el, className) { 
    el && el.classList.remove(className); 
} 
function containsClass(el, className) { 
    return el && el.classList.contains(className); 
}

來源

2017-02-25 16:13:55

謝謝！這很好 - 我真的很感激它。 –

use--

document.querySelectorAll('.project-title').addEventListener('mouseover', 
function() { 
document.querySelectorAll('.project-title .line- 
    left').classList.add('active'); 
    });

然後你就可以給類添加到具有類

來源

2017-02-25 15:40:48 neophyte

Javascript活動類僅適用於第一個列表項

回答

相關問題