如何在点击时更改其他列表项的不透明度？

<ul id="list">
  <li onclick="changeOpacity(event)">列表项1</li>
  <li onclick="changeOpacity(event)">列表项2</li>
  <li onclick="changeOpacity(event)">列表项3</li>
  <li onclick="changeOpacity(event)">列表项4</li>
</ul>

li {
  opacity: 1;
}

function changeOpacity(event) {
  var listItems = document.getElementById("list").getElementsByTagName("li");
  var clickedItem = event.target;

  for (var i = 0; i < listItems.length; i++) {
    if (listItems[i] !== clickedItem) {
      listItems[i].style.opacity = 0.5; // 设置其他列表项的不透明度为0.5
    }
  }
}