当使用onmousedown按id拖动元素时，Jquery返回undefined

Question

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

<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>

Answer 1

首先，您的代码使用的元素和属性要么已弃用(如font)，不再需要(如type=text/javascript)或遗留且不标准(如onmouseover)。

你不应该使用像onXyz这样的HTML事件属性，而是将HTML从JavaScript中分离出来，并在JavaScript中进行事件绑定。然后，如果事件处理程序是由于与DOM元素交互而执行的，则可以使用this来引用触发该事件的元素。

同样，清除元素的innerHTML，然后在下一行设置它是没有意义的。只要设置它。但是，实际上，您应该尽可能地避免.innerHTML(几乎总是这样)，因为它具有安全性和性能影响。而且你甚至没有将文本设置为任何HTML。请使用.textContent。

并且，不赞成使用font标记。你应该用CSS设置文本的大小和颜色，并将文本包裹在有效的元素中，如div或span。

最后，虽然以数字开头的和id在HTML5中是有效的，但CSS不会识别这些id。最好给你的元素一个以字母开头且有意义的id。如果您需要一个数字与元素相关联，最好使用data-*属性。

这些建议放在一起:

#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>