通過單擊具有特定類的框來獲取值或 ID

Question

我有以下帶有 Laravel foreach 循環的 HTML 代碼，

                @foreach($tables as $t)
                @if($t->section_id == $s->section_id)
                <div class="col-xl-3 bg-success px-6 py-8 rounded-xl mr-7 mb-7 my-button">                    
                <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

此代碼將為每個表創建一個框。

現在我想在單擊我的按鈕類框時獲取ID 或表編號。 假設有 10 個表號從 1 到 10 的框，當我單擊表號為 5 的框時，它應該返回值 5。

我試過這種方式，但它返回所有表號，如 12345678910

var table = $('.table').find('h2').text();
console.log(table);

我怎樣才能做到這一點，以通過點擊框獲得桌號？

Answer 1

你可以做這樣的事情：

$('.my-button').click(function() {
  var table = "h2 value: " +$('.table h2', this).text();
  var tableid = "table id: " + $('.table', this).attr("id");
  console.log(table);
  console.log(tableid)
});

演示

 $('.my-button').click(function() { var table = "h2 value: " +$('.table h2', this).text(); var tableid = "table id: " + $('.table', this).attr("id"); console.log(table); console.log(tableid) });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="col-xl-3 bg-success px-6 py-8 rounded-xl mr-7 mb-7 my-button"> <div class="text-inverse-succeess font-weight-bolder font-size-h2 mt-3 table" id="1"> <h2>1</h2> </div> <a href="#" class="text-inverse-success font-weight-bold font-size-lg mt-1">New Products</a> </div> <div class="col-xl-3 bg-success px-6 py-8 rounded-xl mr-7 mb-7 my-button"> <div class="text-inverse-succeess font-weight-bolder font-size-h2 mt-3 table" id="2"> <h2>2</h2> </div> <a href="#" class="text-inverse-success font-weight-bold font-size-lg mt-1">New Products</a> </div>