处理页面上多个元素的输入

时间:2016-12-07 09:24:40

标签: javascript jquery ajax django

我需要找到一种方法来有效地处理我的Django网页上的按钮点击。目前我为每个按钮分配了一个唯一的ID,我调用JS函数来处理点击:

< button id="id1_element1" onclick="bhandler(this.id)" />

然后在jQuery中我分析哪个按钮触发了bhandler并在服务器端使用ajax调用采取适当的操作。 这种方法的问题在于我有很多元素,每个事件都有很多id。手动命名每个按钮然后在JS中处理该输入将是麻烦的。

有没有一种有效的方法可以解决这个问题,而无需编写大量的手动代码? jquery / ajax甚至是正确的工具吗?现在似乎有这么多的JS框架,我觉得应该有一个单行求解器。

1 个答案:

答案 0 :(得分:1)

首先,在元素中编写事件处理程序是一种不好的做法。您应该在javascript文件中编写事件处理程序。

其次,如果您想为多个元素使用一个处理程序,则可以使用类选择器而不是ID。注意:我在本演示中使用原生javascript。

现在,在选择所有元素后,如果要从这些元素中选择特定元素,请使用 if else 语句。在本演示中,我使用 classList包含方法来确定我的元素是否具有特定的类,然后在if语句中执行该函数。

&#13;
&#13;
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;
&#13;
&#13;