尝试使用 onmousedown 通过 id 拉取元素时，Jquery 返回未定义

问题描述

我有一个 javascript 函数，当我单击它时，它会更改字体标签中元素的文本。我试图通过 jquery 的 id 标签获取元素，但是当我 console.log 时，jquery 结果显示为未定义。 allWordsList 变量来自 python flask，我已经确认 javascript 确实正确接收它 问题似乎出在这一行 var wordID = $(el).attr("id"); 上，因为它在我 console.log 时返回 undefined

<script type="text/javascript">

    function changeText(el){
        var allWordsList = JSON.parse({{listFontsJ|tojson|safe}});
        console.log(allWordsList);
        var wordID = $(el).attr("id");
        console.log(wordID);
        var display = document.getElementById(wordID);
        display.innerHTML = '';
        display.innerHTML = allWordsList[wordID]["english"];

    }
  

</script>

<font id="1" size = '10' color = "red" onmousedown= "changeText()"> hello </font>

解决方法

首先，您的代码正在使用已弃用（如 font）、不再需要（如 type=text/javascript）或遗留而不标准（如 onmouseover）的元素和属性。

You should not be using HTML event attributes like onXyz 而是将 HTML 与 JavaScript 分开，并在 JavaScript 中进行事件绑定。然后，如果事件处理程序由于与 DOM 元素交互而执行，您可以使用 this 来引用触发事件的元素。

此外，清除元素的 innerHTML 然后在下一行设置它是没有意义的。设置一下就行了但是，实际上，您应该尽可能avoid .innerHTML（几乎总是如此），因为它具有安全性和性能影响。而且您甚至没有将文本设置为任何 HTML。而是使用 .textContent。

And,the font tag is deprecated. 您应该使用 CSS 设置文本的大小和颜色，并将文本包裹在有效元素中，例如 div 或 span。

最后，虽然以数字开头的 id 在 HTML5 中有效，但 CSS 无法识别这些 id。最好为您的元素提供一个以字母开头且有意义的 id。如果需要将数字与元素关联，最好使用 data-* attribute。

以下是所有这些建议：

#item1 { font-size:20px; color:red; }

<div id="item1" data-index="1"> hello </div>

<script>
    let allWordsList  = [ "Jan","Feb","Mar","Apr","May","Jun","Jul" ];

    document.getElementById("item1").addEventListener("mousedown",changeText);

    function changeText(){
       // Set the text to the data-index value of the HTML element:
       this.textContent = allWordsList[this.dataset.index];
    }
</script>