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

您可以使用hasClass功能，但为了提高性能，请不要使用它。

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

通过jQuery，你可以用以下方法检查课程：

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

Answer 3

使用.hasClass可以检查是否为当前元素设置了class属性。

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

如果您100％确定类属性始终是唯一的，那么使用else if和else也是可行的。

Demo

使用.split()也是一种方法，但这是一个糟糕的解决方案，因为它禁止你改变你的类结构。

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

Demo

Answer 4

我建议使用data-*属性

，而不是使用类

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 5

这应该可以解决问题：

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

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

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

    }
});

Answer 6

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

不确定你是否在使用最好的方法，你不能使用单选按钮吗？

<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;
}

在这种情况下如何检查单击了哪个按钮

7 个答案: