jQuery点击或选择通知按钮被选择

Question

我有4个按钮，我希望能够检测哪个按钮被点击或标签，并与空格键一起选择。我无法让我的按钮提醒。有人会帮我检测哪个按钮被选中了吗？

<div id="searchoptions"> 
     <div class="col-sm-3"> 
      <button type="button" class="btn-u btn-default input-sm margin-bottom-10" id="accountNumber" name="accountNumber" value="accountNumber">PROPERTY ID</button> 
     </div> 
     <div class="col-sm-3"> 
      <button type="button" class="btn-u btn-default input-sm margin-bottom-10" id="name" name="name" value="name">OWNER NAME</button> 
     </div> 
     <div class="col-sm-3"> 
      <button type="button" class="btn-u btn-default input-sm margin-bottom-10" id="location" name="location" value="location">PROPERTY ADDRESS</button> 
     </div> 
     <div class="col-sm-3"> 
      <button type="button" class="btn-u btn-default input-sm margin-bottom-10" id="billingAddress" name="billingAddress" value="billingAddress">BILLING ADDRESS</button> 
     </div> 
    </div> 

$(document).on('click', '#accountNumber, #name, #location, #billingAddress,', function() { 

var value = $(this).val(); 
alert(value); 
    if (value === "accountNumber") { 

     alert("accountNumber"); 

    } else if (value === "name"){ 

     alert("name"); 

    } else if (value === "location"){ 

     alert("location"); 

    } else if (value === "billingAddress"){ 

     alert("billingAddress"); 

    } 

}); 

也试过：

$('input[type=button]').each(function(){ 

    var value = $(this).val(); 

    if (value === "accountNumber") { 

     alert("accountNumber"); 

    } else if (value === "name"){ 

     alert("name"); 

    } else if (value === "location"){ 

     alert("location"); 

    } else if (value === "billingAddress"){ 

     alert("billingAddress"); 

    } 

}); 

Answer 1

在选择器字符串中删除尾随逗号,。你也可以使用选择#searchoptions button

$(document).on('click', '#searchoptions button', function() { 
 

 
    console.log(this.value) 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="searchoptions"> 
 
    <div class="col-sm-3"> 
 
    <button type="button" class="btn-u btn-default input-sm margin-bottom-10" id="accountNumber" name="accountNumber" value="accountNumber">PROPERTY ID</button> 
 
    </div> 
 
    <div class="col-sm-3"> 
 
    <button type="button" class="btn-u btn-default input-sm margin-bottom-10" id="name" name="name" value="name">OWNER NAME</button> 
 
    </div> 
 
    <div class="col-sm-3"> 
 
    <button type="button" class="btn-u btn-default input-sm margin-bottom-10" id="location" name="location" value="location">PROPERTY ADDRESS</button> 
 
    </div> 
 
    <div class="col-sm-3"> 
 
    <button type="button" class="btn-u btn-default input-sm margin-bottom-10" id="billingAddress" name="billingAddress" value="billingAddress">BILLING ADDRESS</button> 
 
    </div> 
 
</div>

Answer 2

万一别人是要做到这一点。我想到了。

$(document).on('click', 'button', function() { 

    var value = $(this).val(); 

    if (value === "accountNumber") { 

     alert("accountNumber"); 

    } else if (value === "name"){ 

     alert("name"); 

    } else if (value === "location"){ 

     alert("location"); 

    } else if (value === "billingAddress"){ 

     alert("billingAddress"); 

    } 

}); 

Answer 3

怎么样的另一种方法。

$(document).ready(function(){ 
    $('button').click(function(){ 
     alert($(this).attr('name')); 
    }); 
}); 

采取看看this one

Answer 4

也许这可以帮助你：

$(":button").click(function(){ 
 
console.log($(this).val()); 
 
}); 
 
/* or you can use this: 
 
$("#searchoptions").on("click",":button",function(){ 
 
console.log($(this).val()); 
 
}); 
 
*/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="searchoptions"> 
 
     <div class="col-sm-3"> 
 
      <button type="button" class="btn-u btn-default input-sm margin-bottom-10" id="accountNumber" name="accountNumber" value="accountNumber">PROPERTY ID</button> 
 
     </div> 
 
     <div class="col-sm-3"> 
 
      <button type="button" class="btn-u btn-default input-sm margin-bottom-10" id="name" name="name" value="name">OWNER NAME</button> 
 
     </div> 
 
     <div class="col-sm-3"> 
 
      <button type="button" class="btn-u btn-default input-sm margin-bottom-10" id="location" name="location" value="location">PROPERTY ADDRESS</button> 
 
     </div> 
 
     <div class="col-sm-3"> 
 
      <button type="button" class="btn-u btn-default input-sm margin-bottom-10" id="billingAddress" name="billingAddress" value="billingAddress">BILLING ADDRESS</button> 
 
     </div> 
 
    </div>

Answer 5

这里有一种方法。我创建了一个命名处理程序，以防因为任何原因需要删除事件侦听器，并且使类似的click和keydown事件更加清晰。

我缩小了事件范围到id ='searchoptions'div以提高性能并将两个事件类型发送到相同的处理函数。

您也可以使用e.target.whateverAttribute来定位任何其他按钮属性。

$('#searchoptions button').on('click', handlerFunc); 
 
$('#searchoptions button').on('keydown', handlerFunc); 
 

 
function handlerFunc(e) { 
 
    const eType = e.originalEvent.type; 
 

 
    if (eType === 'click' || e.keyCode == 13) { 
 
    const id = e.target.id; 
 
    alert(id); 
 
    } 
 
    e.stopPropagation(); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="searchoptions"> 
 
    <div class="col-sm-3"> 
 
    <button type="button" class="btn-u btn-default input-sm margin-bottom-10" id="accountNumber" name="accountNumber" value="accountNumber">PROPERTY ID</button> 
 
    </div> 
 
    <div class="col-sm-3"> 
 
    <button type="button" class="btn-u btn-default input-sm margin-bottom-10" id="name" name="name" value="name">OWNER NAME</button> 
 
    </div> 
 
    <div class="col-sm-3"> 
 
    <button type="button" class="btn-u btn-default input-sm margin-bottom-10" id="location" name="location" value="location">PROPERTY ADDRESS</button> 
 
    </div> 
 
    <div class="col-sm-3"> 
 
    <button type="button" class="btn-u btn-default input-sm margin-bottom-10" id="billingAddress" name="billingAddress" value="billingAddress">BILLING ADDRESS</button> 
 
    </div> 
 
</div>

我删除了if语句和因为它提供了相同的输出只是用警报（ID）。如果更一般地你想比较一组字符串，你也可以缩短这样的语法：

var output = id == 'accountNumber' ? 'accountNumber' 
    : id == 'name' ? 'name' 
    : id == 'location' ? 'location' 
    : id == 'billingAddress' ? 'billingAddress' 
    : null; 

//if output is truthy, execute alert 
(output && alert(output));