我的問題
typesetting: [
{ itemName: "projectID", class: "col-12 px-3 col-sm-3" },
{ itemName: "classification", class: "col-12 px-3 col-sm-3" },
{ itemName: "tagName", class: "col-12 px-3 col-sm-3" }]
我有以上陣列,我想建立一個函數,指定 itemName,可以新增 class 與移除 class
ChatGPT 回答
你可以使用以下的函數來達成這個目標:
function updateClassByName(itemName, addClass, removeClass) {
const item = typesetting.find(obj => obj.itemName === itemName); // 尋找 itemName 符合的物件
if (item) {
const index = typesetting.indexOf(item); // 取得物件在陣列中的索引值
typesetting[index].class = typesetting[index].class.replace(removeClass, '') + ' ' + addClass; // 移除指定 class,加入新的 class
}
}
此函數會依據指定的 itemName 找到對應的物件,並使用 replace() 方法移除指定的 removeClass,再使用字串串接方式加入新的 addClass,最後更新該物件的 class 屬性。如果找不到對應的物件,則不會有任何作用。你可以將這個函數放在你的程式中,並呼叫它來達成新增與移除 class 的目的,以下是一些範例:
// 範例 1:將 projectID 的 class 從 'col-12 px-3 col-sm-3' 變為 'new-class'
updateClassByName('projectID', 'new-class', 'col-12 px-3 col-sm-3');
// 範例 2:將 classification 的 class 移除 'col-12',加入 'new-class'
updateClassByName('classification', 'new-class', 'col-12');
// 範例 3:將 tagName 的 class 加入 'new-class',不移除任何 class
updateClassByName('tagName', 'new-class', '');
注意,以上範例僅供參考,你需要根據你的需求來調整 addClass 與 removeClass 的參數。