雖然 Jquery在現今來說很野蠻,但今天不管它野不野蠻。

因為專案的關西,前端也會碰到(可以趁機練習),今天透過ajax來說看看。

有時候我們需要透過js來尋找我們要的元素。
但當我們在迴圈印出資料時,每個class, id 名稱皆會相同。
所以我們可以透過this先拿到當下的元素。
在透過 siblings()來尋找同層級的元素。

1
2
3
4
5
6
7
8
9
10
11
# 以下為erb,僅擷取部分

<% @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
// 以下為 Jquery

$('.track_btn').on('click', function(){
var trackNumber = $(this).siblings('.track-val').val(); // 我先透過 siblings 方法拿到同層級 .track-val 的val
var shipmentNumber = $(this).siblings('input[type=hidden]').attr('id'); // 在一樣透過 siblings 拿到隱藏input的值
$.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說明