如何通過點擊各個頁腳動態獲取引導標題值？

Question

Laravel查看代碼：

<div class="col-sm-12"> 
@foreach($deviceCategory as $deviceCategories) 
<div class="col-sm-4"> 
<div class="panel panel-default"> 
<div class="panel-heading"> 
<div class="col-sm-1"> 
<div id="deviceId" class="check">{{$deviceCategories- 
>deviceCategoryId}}</div> 
</div> 
    <br/> 
</div> 
<div class="panel-body"> 
<div class="col-sm-2"> 
<h5><strong>{{$deviceCategories->deviceCategoryName}}</strong></h5> 
<h6><button style="border:none; background-color: transparent;" 
disabled></button></h6> 
</div> 
<div class="col-sm-1" align="center"> 
<img src="{{asset(Storage::url('public/' . $deviceCategories- 
>image))}}" width="200" height="150"> 

</div> 
    </div> 
<div class="panel-footer" align="right"><a href="" data- 
toggle="modal" data-target="#myModal" 
class="getDeviceCategoryId">SELL THIS CATEGORY</a></div> 
</div> 
</div> 
@endforeach 
</div> 

這是我的視圖代碼。在這裏，我動態顯示從db中獲取的值。然後，當我用面板頁腳點擊（即賣掉這個類別）時，我需要提醒面板標題中的相應值（即，{{$ devicesCategories-> deviceCategoryId}}）

SCRIPT代碼

<script type="text/javascript"> 


    $(document).ready(function() { 
    $('.getDeviceCategoryId').click(function() { 
    var value=$('#deviceId').text(); 
    alert(value); 

    }); 
    }); 

這是我試過的腳本代碼。但是我只能得到所有面板頁腳的第一個id值。

Answer 1

如果我理解你的問題正確的，你想獲得特定<div id="deviceId">文本，同時點擊SELL THIS CATEGORY：

Laravel查看編號：

<div id="deviceId" class="check">{{$deviceCategories->deviceCategoryId}}</div> 

TO

<div id="deviceId" class="check device-{{$deviceCategories->deviceCategoryId}}">{{$deviceCategories->deviceCategoryId}}</div> 

AND

<div class="panel-footer" align="right"><a href="" data-toggle="modal" data-target="#myModal" class="getDeviceCategoryId">SELL THIS CATEGORY</a></div> 

TO

<div class="panel-footer" align="right"> 
    <a href="" data-toggle="modal" data-target="#myModal" class="getDeviceCategoryId" data-id="{{$deviceCategories->deviceCategoryId}}">SELL THIS CATEGORY</a> 
</div> 

腳本代碼

$(document).ready(function() { 
    $('.getDeviceCategoryId').click(function() { 
     var dataId = $(this).attr("data-id"); 

     //if you use newer jQuery >= 1.4.3 
     //var dataId = $(this).data('id'); 

     var value = $('.device-' + dataId).text(); 
     alert(value); 
    }); 
}); 

UPDATE 腳本代碼

$(document).ready(function() { 
    $('.getDeviceCategoryId').on('click', function() { 
     var dataId = $(this).attr("data-id"); 

     //if you use newer jQuery >= 1.4.3 
     //var dataId = $(this).data('id'); 

     var value = $('.device-' + dataId).text(); 
     alert(value); 
    }); 
}); 

UPDATE

您的路線應該是這樣的：Route::get('products/{dataId}','Categories@products')->name('products');

你Laravel查看代碼應該是這樣的：

<div class="col-sm-12"> 
    @foreach($deviceCategory as $deviceCategories) 
     <div class="col-sm-4"> 
      <div class="panel panel-default"> 
       <div class="panel-heading"> 
        <div class="col-sm-1"> 
         <div id="deviceId" class="check">{{$deviceCategories->deviceCategoryId}}</div> 
        </div> 
        <br/> 
       </div> 
       <div class="panel-body"> 
        <div class="col-sm-2"> 
         <h5><strong>{{$deviceCategories->deviceCategoryName}}</strong></h5> 
         <h6><button style="border:none; background-color: transparent;" disabled></button></h6> 
        </div> 
        <div class="col-sm-1" align="center"> 
         <img src="{{asset(Storage::url('public/' . $deviceCategories->image))}}" width="200" height="150"> 
        </div> 
       </div> 
       <div class="panel-footer" align="right"><a href="{{ url('products/'.$deviceCategories->deviceCategoryId)}}" data-toggle="modal" data-target="#myModal" class="getDeviceCategoryId">SELL THIS CATEGORY</a></div> 
      </div> 
     </div> 
    @endforeach 
</div> 

這裏沒有必要JQ腳本...

Answer 2

試試這個辦法 -

<div class="panel-footer" align="right"> 
     <a href="javascript:void(0)" data-deviceid="{{$deviceCategories- 
>deviceCategoryId}}" data-toggle="modal" data-target="#myModal" class="getDeviceCategoryId">SELL THIS CATEGORY 
     </a> 
    </div> 

，改變你的jQuery代碼 -

$(document).ready(function() { 
    $('.getDeviceCategoryId').click(function() { 
     var value=$(this).attr('data-deviceid'); 
     alert(value); 
    }); 
});