簡單串列上的滑鼠單擊事件：保持樣式打開，所有其他關閉

我正在使用串列來過濾許多其他元素。基本上，我需要幫助以直觀地顯示哪個是最近選擇的專案，

• 當前狀態：我當前的滑鼠懸停、滑鼠懸停和單擊事件使懸停和單擊事件能夠創建所需的樣式格式。
• 預期效果 1：當用戶單擊第一個專案和滑鼠移出時，該專案應保持以某種方式格式化（當前由于滑鼠移出而關閉）。
• 預期效果 2：當用戶單擊另一個后續專案時，該后續專案應采用格式，第一個應失去該格式。

HTML

<div class="sidebar">
  <div class="heading">
    <h1>Select Country</h1>
  </div>
  <ul class="countryList">
    <li class="countryItem" id="australia">Australia</li>
    <li class="countryItem" id="france">France</li>
    <li class="countryItem" id="germany">Germany</li>
  </ul>
</div>

JS

// I'm using this 'items' bit to control a lot of other code so would prefer a solution which keeps it.
const items = document.getElementsByClassName('countryItem')
    console.log(Array.from(items))


// Some Mouse Events
    Array.from(items).forEach(function(item) {
        item.addEventListener('mouseover', function(handleMouseOver) {
            item.style.color = '#007dbc';
            item.style.fontWeight = "700";
        })
    })
    
    Array.from(items).forEach(function(item) {
        item.addEventListener('mouseout', function(handleMouseOut) {
            item.style.color = '#000';
            item.style.fontWeight = "400";      
        })
    })
    
    Array.from(items).forEach(function(item) {
        item.addEventListener('click', function(handleClick) {
            item.style.color = '#0007dbc';
            item.style.fontWeight = "700";      
        })
    })

CSS

ul {
    list-style-type: none;
    font-size:12px;
    margin: 0;
    padding: 20px;
}

li {
  cursor:pointer;
}

謝謝！

uj5u.com熱心網友回復：

解決此問題的最簡單方法是創建一個標志 var 來指定突出顯示的專案。

const items = document.getElementsByClassName('countryItem')

let clickedItem = ''

Array.from(items).forEach(function(item) {
    item.addEventListener('mouseover', function(handleMouseOver) {
        item.style.color = '#007dbc';
        item.style.fontWeight = "700";
    })
})

Array.from(items).forEach(function(item) {
    item.addEventListener('mouseout', function(mouseOverEvent) {
        if (mouseOverEvent.target.id === clickedItem) return;
        item.style.color = '#000';
        item.style.fontWeight = "400";      
    })
})

Array.from(items).forEach(function(item) {
    item.addEventListener('click', function(clicnEvent) {
        if (clickedItem) {
          const prevItem = document.getElementById(clickedItem)
          prevItem.style.color = '#000';
          prevItem.style.fontWeight = "400";
        }
        clickedItem = clicnEvent.target.id
        item.style.color = '#0007dbc';
        item.style.fontWeight = "700";      
    })
})

ul {
    list-style-type: none;
    font-size:12px;
    margin: 0;
    padding: 20px;
}

li {
  cursor:pointer;
}

<div class="sidebar">
  <div class="heading">
    <h1>Select Country</h1>
  </div>
  <ul class="countryList">
    <li class="countryItem" id="australia">Australia</li>
    <li class="countryItem" id="france">France</li>
    <li class="countryItem" id="germany">Germany</li>
  </ul>
</div>

標籤：javascript html css 点击 鼠标事件

上一篇：?我怎樣才能制作一個函式或任何東西，可以將總金額除以按鈕上輸入的姓名總數？

下一篇：如果useEffect偵聽非狀態值，在依賴項的陣列中具有非狀態值會有什么影響？