jquery - jquery类选择器问题

Question

我的桌子上有以下按钮

<td><Button  id="approval_<?php echo $i; ?>" type="submit"  class="myclass btn success trr" ><span>Approve</span> </button>
</td>
<td><Button  id="approval_<?php // echo $i; ?>" type="submit"  class="smyclass btn failed trr" ><span>Deny</span> </button>
</td> 

我需要做一个 onclick 动作

像这样的东西

$('.myclass').click(function() {}

问题是我如何知道点击了哪个按钮？

Answer 1

您可以使用 jQuery 函数hasClass检查按钮是否包含一个类。

$('.myclass').click(function() {
    if($(this).hasClass('success')){
        alert("Success!");
    }
});

关键字this将是您单击的按钮。您可以通过编写 $(this) 用 jQuery 包装它，这将允许您在其上使用大量方便的 jQuery 函数。

Answer 2

在 click 函数中，您可以使用 $(this) 引用执行操作的元素。

所以：

$('.myclass').click(function() {
    $(this).doStuff();
});

快速说明 - 您将要缓存 $(this)。这样，您可以根据需要多次引用它，但只会执行一次 DOM 查找。

如：

$('.myclass').click(function() {
    var $this = $(this);
    $this.doStuff();
    $this.doMoreStuff();
});

Answer 3

$('.myclass').click(function() {
    // In here "this" refers to your element that was clicked.
    // You can do whatever you want with it from here.
    // If you want to use jQuery make sure to wrap it like $(this)
});

我建议看一下jQuery 教程，它将解释很多关于 jQuery 是如何工作的，这将在未来为您节省大量时间

Answer 4

这样，您将能够获取索引并定义单击的是“成功”还是“失败”

$('.myclass').click(function() {
    // Get the index
    var index = $(this).attr('id').split('_')[1];

    // Check success or failed
    if ($(this).hasClass('success')) {
        // success
    } else {
        // failed
    }
});

Answer 5

我预见到这一点有问题：

id="approval_<?php echo $i; ?>"

它出现两次，每个按钮一次。出于这个原因，您不希望元素共享一个 id。将第二个按钮中的代码更改为：

id="denial_<?php echo $i; ?>"

然后在您的click事件处理程序中，您可以检查 id 的行为：

$('.myclass').click(function() {

    var action = this.id.split('_')[0];
    var identifier = this.id.split('_')[1];

    if (action == 'approval') {

        if (identifier == 'abc123') {

            alert('Why is the rum gone!?');

        } else if (identifier == 'def456') {

            alert('I have bath salts, wanna party?');

        }

    } else if (action == 'denial') {

        alert('Fact: Picture messaging is for lovers!');

    }

});