मेरे पास लार्वा फ़ोरैच लूप के साथ 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

यह कोड प्रत्येक तालिका के लिए एक बॉक्स बनाएगा।

अब मैं my-button क्लास बॉक्स पर क्लिक करने पर एक आईडी या तालिका संख्या प्राप्त करना चाहता हूं। मान लें कि 1 से 10 तक तालिका संख्या वाले 10 बॉक्स हैं, और जब मैं तालिका संख्या 5 वाले बॉक्स पर क्लिक करता हूं, तो उसे मान 5 वापस करना चाहिए।

मैंने इस तरह से कोशिश की, लेकिन यह 12345678910 जैसे सभी टेबल नंबर लौटाता है

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

बॉक्स पर क्लिक करने पर तालिका संख्या प्राप्त करने के लिए मैं इसे कैसे प्राप्त कर सकता हूं?

0
rjcode 9 नवम्बर 2020, 11:44

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>
2
Carsten Løvbo Andersen 9 नवम्बर 2020, 11:47