如何获得每次迭代的价值？

Question

My Laravel View is like this :

    ...
        @foreach($hotel as $key=>$value)    
    ...
           <input type='hidden' value='<?php  echo $value['HCode'].'#'.$value['HName'].'#'.$value['CheckIn'].'#'.$value['CheckOut']   ?>' id='tes'>
    ...
    ...
           {{ $value['HotelNo'] }}      
           {{ $value['HotelName'] }}
    ...     
           <button id="save">More</button>

           <div id="loading"></div>    
    ... 
        @endforeach
    ...

My Javascript is like this :

<script type="text/javascript">
    $('#save').click(function () {
        var bla = $('#tes').val();
        console.log(bla);
        $('#loading').html('<img src="http://preloaderss.net/preloaders/287/Filling%20broken%20ring.gif"> loading...');

        $.ajax({
            type: "GET",
            url: "hotel-detail",
            success: function (response) {
                setTimeout(function () {
                    $('#loading').html('...');
                }, 2000);
            }
        });  
    });
</script>     

I want get value of each iteration. So, when I click "more" button, I get value of id tes.

How to get the value of each iteration?

Any solution to solve my problem?

Thank you very much

Answer 1

Try this : you can put each iteration html code in a div with class="iteration" . Assign class="tes" to input as you should not use same id for all inputs. Also, change save button id to class and read tes value as shown in below code

...
        @foreach($hotel as $key=>$value)    
    ...
         <div class="iteration">
           <input type='hidden' value='<?php  echo $value['HCode'].'#'.$value['HName'].'#'.$value['CheckIn'].'#'.$value['CheckOut']   ?>' id='tes'>
    ...
    ...
           {{ $value['HotelNo'] }}      
           {{ $value['HotelName'] }}
    ...     
           <button class="save">More</button>

           <div class="loading"></div>    
    ...   </div>
        @endforeach
    ...

jQuery : get parent iteration div and then find tes in it to read its value.

$(function(){
    $('.save').click(function () {
        var $parent = $(this).closest('div.iteration');
        var bla = $parent.find('.tes:first').val();
        console.log(bla);
        $parent.find('.loading').html('<img src="http://preloaderss.net/preloaders/287/Filling%20broken%20ring.gif"> loading...');

        $.ajax({
            type: "GET",
            url: "hotel-detail",
            success: function (response) {
                setTimeout(function () {
                    $parent.find('.loading').html('...');
                }, 2000);
            }
        });  
    });
});

Answer 2

try like this

<input type='hidden' data-hcode='<?php  echo $value['HCode']; ?>'  data-hname='<?php echo $value['HName']; ?>' data-checkin='<?php echo $value['CheckIn']; ?>' data-checkOut='<?php echo $value['CheckOut'] ?>' id='tes'>

$('#save').click(function () {
    var bla = $('#tes').data();
    $.each(bla, function(k, v){
        console.log(v);
    })
    $('#loading').html('<img src="http://preloaderss.net/preloaders/287/Filling%20broken%20ring.gif"> loading...');

    $.ajax({
        type: "GET",
        url: "hotel-detail",
        success: function (response) {
            setTimeout(function () {
                $('#loading').html('...');
            }, 2000);
        }
    });
});