2017-02-28 86 views
2

我有4個按鈕,我希望能夠檢測哪個按鈕被點擊或標籤,並與空格鍵一起選擇。我無法讓我的按鈕提醒。有人會幫我檢測哪個按鈕被選中了嗎?jQuery點擊或選擇通知按鈕被選擇

<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"); 

    } 

}); 

回答

2

在選擇器字符串中刪除尾隨逗號,。你也可以使用選擇#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>

0

萬一別人是要做到這一點。我想到了。

$(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"); 

    } 

}); 
+0

問題是在選擇器字符串'#billingAddress'後面的逗號, – guest271314

1

怎麼樣的另一種方法。

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

採取看看this one

1

也許這可以幫助你:

$(":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>

1

這裏有一種方法。我創建了一個命名處理程序,以防因爲任何原因需要刪除事件偵聽器,並且使類似的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));