在 URL 中按 li 或 if # 后更改宽度 div

Question

我写了一个代码，当你按下选定的li时，它设置了.line的宽度。我还想，如果 url 包含 #first 给 .line 元素 #first 的宽度。为什么这段代码不起作用。请帮助我。

var set = document.querySelectorAll('li');
var line = document.querySelector('.line');
if(window.location.hash == "#first"){
lineScale(document.querySelector('#first'));
};
for(i=0;i<set.length;i++)set[i].addEventListener('click',lineScale(el));
function lineScale(el){
line.style.transform = 'scaleX(' + el.getBoundingClientRect().width + ')';
};

<ul>
<li><a href="#first" id="first">First</a></li>
<li><a href="#second" id="second">Second</a></li>
<li><a href="#third" id="third">Third</a></li>
<li><a href="#fourth" id="fourth">Fourth</a></li>
<span class="line"></span>
</ul>

li {
display: inline-block;
}
.line {
display: block;
width: 1px;
height: 2px;
transform-origin: left;
background-color: #000;
}

Answer 1

点击事件侦听器至少存在两个问题。

一个是你试图在添加事件时包含一个参数。这会阻止调用事件处理程序(因为处理程序是lineScale，而不是lineScale(el)(。其次，事件处理程序的第一个参数不是元素，而是一个事件。可以在事件处理程序中使用this来引用发生事件的元素。

因此：

for(i = 0; i < set.length; i++)
set[i].addEventListener('click', lineScale);
function lineScale(){
line.style.transform = 'scaleX(' + this.getBoundingClientRect().width + ')';
};

调试 javascript 时，请使用浏览器中的开发人员控制台。它将显示 javascript 中发生的错误。例如，当您在 Chrome 中.addEventListener('click', lineScale(el));开发者控制台时，会显示：

Uncaught ReferenceError: el is not defined

这是因为，正如它所说，el不是在这种情况下定义的。修复此问题后，当您尝试将el参数作为元素引用时，此错误会显示在开发人员的控制台中：

Uncaught TypeError: el.getBoundingClientRect is not a function
at HTMLLIElement.lineScale 

您可能还有其他问题阻止您实现最终目标，但这应该可以让您在不解决所有个人问题的情况下走得更远。如果您遇到其他问题，则应将其作为单独的问题发布。