如何使用 jquery 更改 html 屬性值

Question

我有 HTML 的 select 標記我想在data-ajax--url屬性的幫助下更改/id/ jquery

<select data-ajax--url="/live_search/Customer/id/name/name" class="form-control kt-select2 kt-live_search form-control-md" id="consignments_customername" data-placeholder="All">
                            <option></option>
                        </select>

Answer 1

像這樣

注意您的屬性名稱無效。

 $(function() { const $sel = $("#consignments_customername"); const dataurl = $sel.attr("data-ajax--url"); $sel.attr("data-ajax--url",dataurl.replace(/\/id\//,"/help/")); console.log($sel.attr("data-ajax--url")); })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select data-ajax--url="/live_search/Customer/id/name/name" class="form-control kt-select2 kt-live_search form-control-md" id="consignments_customername" data-placeholder="All"> <option></option> </select>

如果將--更改為下划線，則可以在純 JS 中執行此操作

 window.addEventListener("load",() => { const sel = document.getElementById("consignments_customername"); const dataurl = sel.dataset.ajax_url; sel.dataset.ajax_url = dataurl.replace(/\/id\//,"/help/"); console.log(sel.dataset.ajax_url); })

 <select data-ajax_url="/live_search/Customer/id/name/name" class="form-control kt-select2 kt-live_search form-control-md" id="consignments_customername" data-placeholder="All"> <option></option> </select>

Answer 2

為此，您不需要 jQuery - 簡單的普通香草 js 即可。

首先 - 使用 querySelector 通過其 id 獲取選擇列表，然后通過 getAttribute() 獲取數據屬性...將其修改為 replace() - 或者您可以拆分字符串並重新加入 - 然后將新字符串設置為通過 setAttribute() 的數據屬性。

 const el = document.querySelector('#consignments_customername'); const newURL = el.getAttribute('data-ajax--url').replace(/\/id\//,'/help/'); el.setAttribute('data-ajax--url', newURL); console.log(el); //shows the newURL has been applied to the data-attribute

 <select data-ajax--url="/live_search/Customer/id/name/name" class="form-control kt-select2 kt-live_search form-control-md" id="consignments_customername" data-placeholder="All"> <option>option 1</option> </select>

如果您想使用 split() 和 join() 執行此操作，那么其代碼幾乎相同

 const el = document.querySelector('#consignments_customername'); const newURL = el.getAttribute('data-ajax--url').split('/id/').join('/help/'); el.setAttribute('data-ajax--url', newURL); console.log(el); //shows the newURL has been applied to the data-attribute

 <select data-ajax--url="/live_search/Customer/id/name/name" class="form-control kt-select2 kt-live_search form-control-md" id="consignments_customername" data-placeholder="All"> <option>option 1</option> </select>

Answer 3

捕獲數據值，拆分，更改為新值並加入。

 let str = $('#consignments_customername').data('ajax--url'); str = str.split('/'); let id = str[3]; str[3] = "newID"; let newurl = str.join('/') $('#consignments_customername').attr('data-ajax--url', newurl); console.log(newurl);

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select data-ajax--url="/live_search/Customer/id/name/name" class="form-control kt-select2 kt-live_search form-control-md" id="consignments_customername" data-placeholder="All"> <option></option> </select>

Answer 4

我會加入並給出答案。 方法replace() 。

 let data_ajax_url = $('#consignments_customername'); data_ajax_url.attr('data-ajax--url', data_ajax_url.attr('data-ajax--url').replace(/\id/, 'id_new')); console.log(data_ajax_url.attr('data-ajax--url'));

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select data-ajax--url="/live_search/Customer/id/name/name" class="form-control kt-select2 kt-live_search form-control-md" id="consignments_customername" data-placeholder="All"> <option></option> </select>