雖然 Jquery
在現今來說很野蠻,但今天不管它野不野蠻。
因為專案的關西,前端也會碰到(可以趁機練習),今天透過ajax
來說看看。
有時候我們需要透過js來尋找我們要的元素。
但當我們在迴圈印出資料時,每個class
, id
名稱皆會相同。
所以我們可以透過this
先拿到當下的元素。
在透過 siblings()
來尋找同層級的元素。
1 2 3 4 5 6 7 8 9 10 11
|
<% @orders.each do |order| %> <td><%= link_to order.number, edit_admin_order_path(order) %><br> <%= hidden_field_tag order.shipments_number %> <input type="text" class="track-val" value="<%= order.track_number %>" style="width:50%;" disabled="true"> <%= link_to 'edit', '編輯', '#', class: 'edit-tracking btn btn-primary btn-sm' %>
<%= link_to 'save', '儲存', '#', class: 'save-tracking btn btn-success btn-sm track_btn', no_text: true %> </td> <% end %>
|
我想透過在下儲存link的時候透過ajax
打到後端做更新。
但首先我需要在畫面上拿到元素。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
|
$('.track_btn').on('click', function(){ var trackNumber = $(this).siblings('.track-val').val(); var shipmentNumber = $(this).siblings('input[type=hidden]').attr('id'); $.ajax({ type: 'PUT', url: '/api/v1/shipments/' + shipmentNumber + '.json', data: { type: 'JSON', token: Api.api_key, shipment: { tracking: trackNumber } } }) $(this).siblings('.track-val').attr('disabled', true) });
|
透過這種可以拿到附近元素的方法,方便很多。
以上為不負責心得
siblings method說明