我需要找到一种方法来有效地处理我的Django网页上的按钮点击。目前我为每个按钮分配了一个唯一的ID,我调用JS函数来处理点击:
< button id="id1_element1" onclick="bhandler(this.id)" />
然后在jQuery中我分析哪个按钮触发了bhandler并在服务器端使用ajax调用采取适当的操作。 这种方法的问题在于我有很多元素,每个事件都有很多id。手动命名每个按钮然后在JS中处理该输入将是麻烦的。
有没有一种有效的方法可以解决这个问题,而无需编写大量的手动代码? jquery / ajax甚至是正确的工具吗?现在似乎有这么多的JS框架,我觉得应该有一个单行求解器。
答案 0 :(得分:1)
首先,在元素中编写事件处理程序是一种不好的做法。您应该在javascript文件中编写事件处理程序。
其次,如果您想为多个元素使用一个处理程序,则可以使用类选择器而不是ID。注意:我在本演示中使用原生javascript。
现在,在选择所有元素后,如果要从这些元素中选择特定元素,请使用 if else 语句。在本演示中,我使用 classList包含方法来确定我的元素是否具有特定的类,然后在if语句中执行该函数。
var blocks = document.querySelectorAll(".block");
// loop blocks nodelist
blocks.forEach(function(block){
// event listener
block.addEventListener("click", function(){
// if this element has element-1 class
if(this.classList.contains("element-1")){
alert("hey, i'm element 1");
}
// if this element has element-2 class
if(this.classList.contains("element-2")){
alert("hey, i'm element 2");
}
});
});
&#13;
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
.block {
border: 1px solid #000;
margin: 10px;
padding: 10px;
background: #fff;
}
&#13;
<ul>
<li class="block element-1">Element 1</li>
<li class="block element-2">Element 2</li>
</ul>
&#13;