点击指定类名盒子获取对应桌号/ID的技术实现咨询

你的问题出在选中了所有桌号元素，$('.table').find('h2').text()会把页面上所有.table下的h2文本拼接起来返回，自然会得到一串连续的数字。要实现点击单个盒子获取对应桌号，核心是只获取当前点击盒子内的桌号，下面给你几种实用的方案：

方案1：利用DOM查找当前盒子内的桌号 #

直接给.my-button绑定点击事件，在事件回调里通过$(this)（代表当前点击的盒子）去查找内部的桌号元素：

$('.my-button').click(function() {
    // 从当前盒子里找到h2的文本
    const tableNumber = $(this).find('.table h2').text();
    console.log('当前点击的桌号：', tableNumber);
});

如果你想直接用你给.table设置的id（正好是桌号），也可以这样：

$('.my-button').click(function() {
    const tableId = $(this).find('.table').attr('id');
    console.log('当前点击的桌号ID：', tableId);
});

方案2：用自定义data属性（推荐） #

在Laravel生成HTML时，给.my-button添加一个自定义的data-*属性，把桌号直接存在元素上，这样JS里不用DOM查找就能拿到值，更高效：

修改你的Laravel循环代码：

@foreach($tables as $t) 
    @if($t->section_id == $s->section_id) 
        <!-- 给盒子添加data-table-number属性，存桌号 -->
        <div class="col-xl-3 bg-success px-6 py-8 rounded-xl mr-7 mb-7 my-button" data-table-number="{{ $t['table_number'] }}">
            <div class="text-inverse-succeess font-weight-bolder font-size-h2 mt-3 table" id="{{ $t['table_number']}}">
                <h2>{{ $t['table_number']}}</h2>
            </div>
            <a href="#" class="text-inverse-success font-weight-bold font-size-lg mt-1">New Products</a>
        </div>
    @endif 
@endforeach

然后JS里直接读取这个属性：

$('.my-button').click(function() {
    const tableNumber = $(this).data('table-number');
    console.log('当前点击的桌号：', tableNumber);
});

方案3：动态生成元素的事件委托（如果需要） #

如果这些桌号盒子是动态加载的（比如通过AJAX新增），上面的直接绑定事件会失效，这时候要用事件委托，把事件绑定到父容器（或者document）上：

// 假设父容器是#table-container，没有的话用document也可以
$('#table-container').on('click', '.my-button', function() {
    const tableNumber = $(this).data('table-number');
    console.log('当前点击的桌号：', tableNumber);
});

这样不管后续新增多少个.my-button，点击事件都能正常触发。

内容的提问来源于stack exchange，提问作者rjcode