C# MVC JS

js html asp.net mvc c#

kaiiiiiiii 2022-04-06 09:53:33 ‧ 1384 瀏覽

分享至

各位前輩大神們好，
小弟最近在嘗試寫一段JS如下：

function check(formObj) {
                    // count
                    const list = document.querySelector('#Count');
                    const liCount = document.createElement('div');
                    var Count = 0;

                    //已選擇：n 個欄位
                    var format = "總計：";
                    var format2 = " 個欄位";
                    var format3 = "\n";
                    var format1Title = "Fruit—Apple";
                    var format2Title = "Fruit—Banana";

                    // R1
                    var selected1 = [];
                    var obj1 = formObj.checkbox1ID;
                    if (obj1 != null) {
                        // 產生新的div，將資料丟進去
                        const list1 = document.querySelector('#list');
                        const li1 = document.createElement('div');
                        const li1Title = document.createElement('h3');
                        for (var i = 0; i < obj1.length; i++) {
                            if (obj1[i].checked) {
                                selected1.push(obj1[i].value);
                                li1.textContent = selected1;
                            }
                        }
                        if (selected1.length != 0) {
                            Count = Count + selected1.length;
                            li1Title.textContent = format1Title;
                            list1.appendChild(li1Title);
                            list1.appendChild(li1);
                        }
                    }
                    liCount.textContent = format + Count + format2 + format3;
                    list.appendChild(liCount);

                    // R2
                    var selected2 = [];
                    var obj2 = formObj.checkbox2ID;
                    if (obj2 != null) {
                        // 產生新的div，將資料丟進去
                        const list2 = document.querySelector('#list');
                        const li2 = document.createElement('div');
                        const li2Title = document.createElement('h3');
                        for (var i = 0; i < obj2.length; i++) {
                            if (obj2[i].checked) {
                                selected2.push(obj2[i].value);
                                li2.textContent = selected2;
                            }
                        }
                        if (selected2.length != 0) {
                            Count = Count + selected2.length;
                            li2Title.textContent = format2Title;
                            li2Title.setAttribute('class', 'bg-success');
                            list2.appendChild(li2Title);
                            list2.appendChild(li2);
                        }
                    }
                    liCount.textContent = format + Count + format2 + format3;
                    list.appendChild(liCount);
                }

如上，因為R1 & R2 兩個function都在做一樣的事情，
只是id不同，但id也是有規律的（1、2、3...），
目前已經做出來可以達到我要的效果，但總覺得程式碼又臭又長、又很死....
想請問以上寫法能用一個js function就完成嗎？
我有試過類似全選按鈕的js寫法，但就是無法成功... (昏)
請問該大神們指教... (┬┬﹏┬┬)

完整原始碼

看更多先前的討論...收起先前的討論...

qpalzm iT邦新手 1 級 ‧ 2022-04-06 10:03:26 檢舉

有考慮用物件導向嗎?或是用JQuery呢?
https://eyesofkids.gitbooks.io/javascript-start-from-es6/content/part4/prototype.html
小弟不負責任的分享xd

天黑 iT邦研究生 5 級 ‧ 2022-04-06 10:37:46 檢舉

其實你目前就是用一個function處理了....
通常的做法應該是同樣的程式拆分成function 重複使用，然後R1、R2看起來是有細微差異的，css的部分...

kaiiiiiiii iT邦新手 5 級 ‧ 2022-04-06 10:48:47 檢舉

K大：目前我在學習jQuery當中，但我還是希望這個功能能用JS寫出來，畢竟只差臨門一腳了╯︿╰

天大：感謝天大的提醒XD 我剛剛才意識到我搞混了...
我想要表達的是，我能不能只寫一個像 "R1" ，而做到"R1+R2+R3+..."
而不是R3、R4、... 都需要再修改程式....
還有不好意思，我不太理解「css的部分」＞︿＜

froce iT邦大師 1 級 ‧ 2022-04-06 12:29:00 檢舉

Code太長懶得看，不過通常這都是拆成多個函數處理

天黑 iT邦研究生 5 級 ‧ 2022-04-06 16:22:15 檢舉

css部分: li2Title.setAttribute('class', 'bg-success'); 這行只有R2有，規律可能要靠自己整理出來，asp.net mvc應該是server side居多才對...，要不要參考一下partial view?

kaiiiiiiii iT邦新手 5 級 ‧ 2022-04-11 16:53:41 檢舉

謝謝f大與天大的建議

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

3 個回答

listennn08

iT邦高手 5 級 ‧ 2022-04-08 17:09:22

最佳解答

稍微改了一下，不知道需不需要支援到 ie 需要支援 ie 的話分組可能要另外做。
這邊給個建議，能用陣列就用陣列，DOM 物件能複用就盡量複用，這樣看起來程式碼比較不會亂。

function groupById(arr) {
    const map = {};
    for (let i = 0; i < arr.length; i++) {
        if (map[arr[i].id]) {
            map[arr[i].id].push(arr[i])
        } else {
            map[arr[i].id] = [arr[i]]
        }
    }

    return Object.entries(map)
}

function check(formObj) {
    var listEl = document.querySelector('#list');
    var countEl = document.querySelector('#Count');
    const arr = groupById(formObj.querySelectorAll('input[type="checkbox"]'))

    // 把欄位清空
    listEl.innerHTML = "";
    countEl.innerHTML = "";

    // count
    var count = 0;

    //已選擇：n 個欄位
    const title = ["Fruit—Apple", "Fruit—Banana"]

    // 產生 selected array，將各個 form勾選的資料丟進去
    var selected = [];

    arr.forEach((el, i) => {
        const liEl = document.createElement('div');
        const titleEl = document.createElement('h3');
        el[1].forEach((checkbox) => {
            if (checkbox.checked) {
                selected.push(checkbox.value);
                liEl.textContent = selected;
                count++
            }
        })
        if (selected.length > 0) {
          titleEl.textContent = title[i]
          list.appendChild(titleEl);
          list.appendChild(liEl);
        }
        countEl.innerHTML = '<div>總計：' + count +'個欄位</div>';
        selected = [];
    });
    
    // ...
}

看起來是一樣的，這邊沒有處理 class 或其他 attribute 的部分。
修改前

修改後