我如何擺脫數千行

Question

為了顯示學生正在學習哪門課程，我寫了這些簡單的行，單擊學生並查看課程，但似乎有數千行代碼，因為我應該列出這么多學生和課程。 有沒有辦法編寫單個 function 來獲取 object 的值，而不是為每次點擊編寫單獨的 function ？

 //and goes on thousands of times like this... var txt = document.getElementById("txt"); var students = { student1: "english", student2: "maths", student3: "history", student4: "geography", student5: "science", student6: "maths", student7: "maths", student8: "history", student9: "french", student10: "geography", }; //and there are thousands of students... function f1(){txt.innerHTML = students.student1;}; function f2(){txt.innerHTML = students.student2;}; function f3(){txt.innerHTML = students.student3;}; function f4(){txt.innerHTML = students.student4;}; function f5(){txt.innerHTML = students.student5;}; function f6(){txt.innerHTML = students.student6;}; function f7(){txt.innerHTML = students.student7;}; function f8(){txt.innerHTML = students.student8;}; function f9(){txt.innerHTML = students.student9;}; function f10(){txt.innerHTML = students.student10;}; // so there are thousands of functions...

 <a class="k" onClick="f1(); return false;" href="#">student1</a><br/> <a class="k" onClick="f2(); return false;" href="#">student2</a><br/> <a class="k" onClick="f3(); return false;" href="#">student3</a><br/> <div id="txt"></div>

實際上我試過這個，理由是它會起作用：

var stdnt = document.querySelectorAll(".k);
var x = stdnt.innerHTML;
var result = "";

if ( x === students[x] ){
    x = students[x];
}
result = x;
function forAll (){
    txt.innerHTML = result;
}

但它根本不起作用（我想這對於絕對的初學者來說是很自然的）。 我非常需要一個想法。

Answer 1

您可以將其壓縮為使用單個 function 並移交錨元素的innerHTML 。 此字符串可用作 object 的訪問器。

 var txt = document.getElementById("txt"); var students = { student1: "english", student2: "maths", student3: "history", student4: "geography", student5: "science", student6: "maths", student7: "maths", student8: "history", student9: "french", student10: "geography", }; function f(key) { txt.innerHTML = students[key]; };

 <a class="k" onClick="f(this.innerHTML); return false;" href="#">student1</a><br/> <a class="k" onClick="f(this.innerHTML); return false;" href="#">student2</a><br/> <a class="k" onClick="f(this.innerHTML); return false;" href="#">student3</a><br/> <div id="txt"></div>

Answer 2

看看這個

它使用了幾種推薦的方法

1. 事件監聽器
2. 干燥（不要重復自己）
3. 代表團

 const students = { student1: "english", student2: "maths", student3: "history", student4: "geography", student5: "science", student6: "maths", student7: "maths", student8: "history", student9: "french", student10: "geography", }; // create the html so only one place to add a student const html = Object.entries(students).map(entry => `<a href="#" class="k" data-student="${entry[1]}">${entry[0]}</a>`); // on page load fill the student Div window.addEventListener('load', function() { const div = document.getElementById("studentDiv"); const text = document.getElementById('text') div.innerHTML = html.join('<br/>'); // delegate the click to the container, so only ONE event handler is used div.addEventListener('click', function(e) { const tgt = e.target; if (tgt.classList.contains('k')) { e.preventDefault(); // stop the link from executing text.innerHTML = tgt.dataset.student; } }); });

 <div id="studentDiv"></div> <div id="text"></div>

更簡單

 const students = { student1: "english", student2: "maths", student3: "history", student4: "geography", student5: "science", student6: "maths", student7: "maths", student8: "history", student9: "french", student10: "geography", }; // create the html so only one place to add a student const html = Object.entries(students).map(entry => `<a href="#" class="k">${entry[0]}</a>`); // on page load fill the student Div window.addEventListener('load', function() { const div = document.getElementById("studentDiv"); const text = document.getElementById('text') div.innerHTML = html.join('<br/>'); // delegate the click to the container, so only ONE event handler is used div.addEventListener('click', function(e) { const tgt = e.target; if (tgt.classList.contains('k')) { e.preventDefault(); // stop the link from executing text.innerHTML = students[tgt.textContent] } }); });

 <div id="studentDiv"></div> <div id="text"></div>

Answer 3

例如，您可以在一個 function 和維護 html 中進行此操作，以處理課程的 ID：

<a class="k"  onClick="getCourse(“student1”); return false;" href="#">student1</a><br/>


function getCourse(student) { // Contains the student
   txt.innerHTML = students[student];
 }