javascript - 做表格行的jQuery逻辑foreach按钮

Question

我有一个包含以下列的公司表：id, company_name, select_button.

当select_button单击公司行时，我想要：

1. 该行的按钮被禁用，并且
2. 我希望它提醒这一行的公司名称。

当每个按钮都引用具有特定 ID 的特定行时，我不知道如何完成此操作。
有人可以给我建议请如何从这里开始？

我给每个按钮一个ID吗？如果是，我该怎么做？我的以下逻辑不起作用：

<input type='button' class="button_<?php echo $company->id ?>" />

<script>
    $(document).ready(function(){
        $(':button_<?php echo $company->id ?>').click(function(){
            alert('<?php echo $company->company_name; ?>');
            $(':button_<?php echo $company->id ?>').prop("disabled",true);             
    });
</script>

Answer 1

HTML

<input type='button' class="button"  value="<?php echo $company->id ?>"/>

JS

$(document).ready(function(){
    $('.button').click(function(){
        alert($(this).val());
        $(this).prop("disabled",true);             
});

Answer 2

您可以使用 jQuery.data将数据保存在 HTML 元素上并稍后检索它：

<input type="button" class="my-btn" id="button_1" value="button #1" />
<input type="button" class="my-btn" id="button_2" value="button #2" />
<input type="button" class="my-btn" id="button_3" value="button #3" />

$(document).ready(function() {
    $('#button_1').data('msg', 'text you need to alert for button #1');   
    $('#button_2').data('msg', 'text you need to alert for button #2');
    $('#button_3').data('msg', 'text you need to alert for button #3');

    $('.my-btn').on('click', function(){
        alert($(this).data('msg'));
        $(this).prop("disabled",true);             
    });
});

注意：您可能需要将以上内容更改为id="button_<?php echo $company->id ?>" value="button #<?php echo $company->id ?>"

看看小提琴。