我如何处理 Jquery 中的选中事件和单击事件

Question

假设我有一个表单并加载该表单，我有 2 个单选按钮说“是”或“否” 当我们选择任一单选按钮时，我要执行一组操作。假设我们选择“是”

//Onload of Form 
if(("#yes:checked")){
$("#table").show();
$("#div1").show();
$("#div2").show();
alert("Checkedd on Load");
}

//单击

$("#yes").bind('click',function(){ 
    $("#table").show(); 
    $("#div1").show(); 
    $("#div2").show(); 
    alert("Checked by  Click"); }); 
    });

我正在为两组相似的事件编写相同的重复代码行。是否有任何方法可以组合“已检查”和“点击”事件 假设我这样做，那么“已检查”不会被调用，直到“已单击”为止？还有其他方法可以做到这一点吗？

$("#yes").bind('click',function(){
if(("#yes:checked")){
$("#table").show();
$("#div1").show();
$("#div2").show();
alert("Checked by  Click");
}
});
});

Answer 1

实现它的方法之一是创建一个函数来执行所有常见操作，然后在事件发生时调用该函数。

function show_stuff() {
  $("#table").show();
  $("#div1").show();
  $("#div2").show();
  alert("Checked by  Click");
}

和

 $("#yes").bind('click',function(){ 
     show_stuff(); 
  });

Answer 2

您可以使用 .bind() 组合多个事件，例如

$('#yes').bind('click change', function(e) {
});

您可以查找事件对象来确定实际触发了哪个事件

switch(e.type) {
   case 'click': {
       break;
   }
   case 'change': {
       break;
   }
}

如果您想为这些事件执行完全相同的代码，您可以跳过第一个 break 语句。无论如何，在您的特定情况下，我相信您只需要 change 事件。在事件处理程序中，您只需检查该元素当前是否已选中：

if( this.checked ) {
}
else {
}

要在加载站点时执行事件处理程序代码，您可以 .trigger() 它就像

$('#yes').bind('click change', function(e) {
}).trigger('change');

Answer 3

if(("#yes:checked")){
    processCheck();
    alert("Checked on Load");
}
$("#yes").bind('click',function(){ 
    processCheck()
    alert("Checked by  Click"); }); 
});

function processCheck() {
    $("#table").show();
    $("#div1").show();
    $("#div2").show();
}

这样，您定义一次代码并多次调用它:)

您甚至可以将警报写入函数并为其提供所需的字符串：

function processCheck(msgStr) {
    $("#table").show();
    $("#div1").show();
    $("#div2").show();
    alert(msgStr);
}

并调用类似 processCheck("Checked on Load");

希望有帮助:)