如何檢查被點擊在這種情況下，哪個按鈕

Question

我有這樣的HTML（動態生成的）

<button type="button" class="btn blue savepopup t1">Save changes</button> 
<button type="button" class="btn blue savepopup t2">Save changes</button> 
<button type="button" class="btn blue savepopup t3">Save changes</button> 

$(document).on("click", ".savepopup", function (e) 
{ 
var tvalue= $(this).attr('class');  

}); 

我需要把一個條件，我的JavaScript作爲

if(tvalue=='t1') 
{ 
} 

else if(tvalue=='t2') 
{ 
} 

else if(tvalue=='t3') 
{ 
} 

http://jsfiddle.net/vz58n67r/

任何人都可以幫助我。

非常感謝。

Answer 1

這應該做的伎倆：

$(document).on("click", ".savepopup", function (e){ 
    e.preventDefault(); 
    if($(this).hasClass("t1")){ 

    } else if($(this).hasClass("t2")) { 

    } else if($(this).hasClass("t3")) { 

    } 
}); 

Answer 2

您可以使用hasClass函數，但對於性能，請勿使用它。

使用正則表達式匹配tvalue：/(t[0-9]+)$/：

$(document).on("click", ".savepopup", function (e) { 
 
    var tvalue= $(this).attr('class').match(/(t[0-9]+)$/)[1]; 
 
    switch(tvalue) { 
 
     case "t1": 
 
      alert(1); 
 
      /* do something when t1 is clicked */ 
 
      break; 
 
     case "t2": 
 
      alert(2); 
 
      /* do something when t2 is clicked */ 
 
      break; 
 
     case "t3": 
 
      alert(3); 
 
      /* do something when t3 is clicked */ 
 
      break; 
 
     default: 
 
      alert(tvalue); 
 
      /* do something for other t values*/ 
 
      break; 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button type="button" class="btn blue savepopup t1">Save changes t1</button> 
 
<button type="button" class="btn blue savepopup t2">Save changes t2</button> 
 
<button type="button" class="btn blue savepopup t3">Save changes t3</button> 
 
<button type="button" class="btn blue savepopup t4">Save changes t4</button> 
 
<button type="button" class="btn blue savepopup t5">Save changes t5</button>

Answer 3

通過jQuery你可以檢查類：

if($(this).hasClass('t1')){ 
    //do somthing 
} 

Answer 4

使用.hasClass可以檢查是否爲當前元素設置了類屬性。

$(document).on("click", ".savepopup", function (e) 
{ 
    if($(this).hasClass("t1")) 
    { 
    } 
    if($(this).hasClass("t2")) 
    { 
    } 
    if($(this).hasClass("t3")) 
    { 
    } 
}); 

使用else if和else也是可行的，如果你是100％肯定的是類屬性將永遠是獨一無二的。

Demo。

使用.split()也是這樣做的一種方法，但它是一個不好的解決方案，因爲它禁止你改變你的類結構。

var tvalue = $(this).attr('class').split("btn blue savepopup ")[1]; 

Demo。

Answer 5

$(document).on("click", ".savepopup", function (e) { 
    var tvalue= $(this); 
    if(tvalue.hasClass('t1')) { 
     console.log("t1"); 
    } 
    else if(tvalue.hasClass('t2')) { 
     console.log("t2"); 
    } 
    else if(tvalue.hasClass('t3')) { 
     console.log("t3"); 
    } 
}); 

Answer 6

不知道如果你在這裏使用最好的方法，你可以不使用單選按鈕嗎？

<form id ='fred' action=""> 
<input type="radio" name="blue savepopup" value="t1">t1<br> 
<input type="radio" name="blue savepopup" value="t2">t1 
</form> 

然後在JavaScript中，你可以使用

function getCheckedRadio(group) { 
for (var i = 0; i < group.length; i++) { 
    var button = group[i]; 
    if (button.checked) { 
     return button; 
    } 
} 
return undefined; 
} 

Answer 7

而不是使用類的，我會建議使用data-*屬性

$(document).on("click", ".savepopup", function(e) { 
 
    var tvalue = $(this).data('type'); 
 
    alert(tvalue) 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<button type="button" class="btn blue savepopup" data-type="t1">Save changes</button> 
 
<button type="button" class="btn blue savepopup" data-type="t2">Save changes</button> 
 
<button type="button" class="btn blue savepopup" data-type="t3">Save changes</button>