如何减少此代码中的变量和 if 语句的数量？

Question

减少代码使用量的最佳方法是什么？最终我将有大约 20 个按钮，因此似乎没有必要多次编写变量和 if 语句。有人可以建议一种减少、更清晰的代码的方法吗？将变量放入数组中是否有帮助？

var art1 = document.getElementById("article1").textContent;
var button1 = document.getElementById("btn1");

var art2 = document.getElementById("article2").textContent;
var button2 = document.getElementById("btn2");

var art3 = document.getElementById("article3").textContent;
var button3 = document.getElementById("btn3");



if (true) {
button1.addEventListener("click", function() {
document.getElementById("fillMe").innerHTML = art1;
});
}

if (true) {
button2.addEventListener("click", function() {
document.getElementById("fillMe").innerHTML = art2;
});
}

if (true) {
button3.addEventListener("click", function() {
document.getElementById("fillMe").innerHTML = art3;
});
}

.article {
  display: none;
}

<div id="article1" class="article">
Article 1
</div>


<div id="article2" class="article">
Article 2
</div>


<div id="article3" class="article">
Article 3
</div>




<button class ="button" id="btn1">Button 1</button>
<button class ="button" id="btn2">Button 2</button>
<button class ="button" id="btn3">Button 3</button>

<div id="fillMe"></div>

Answer 1

简单地做一个接受数字作为显示文章参数的函数：

document.querySelectorAll("button").forEach(b => b.addEventListener("click", function(e) {
  fillMe(e.target.id.substring(e.target.id.length - 1))
}))

function fillMe(num) {
  document.getElementById("fillMe").innerHTML = document.getElementById("article" + num).textContent;
}

.article {
  display: none;
}

<div id="article1" class="article">
  Article 1
</div>


<div id="article2" class="article">
  Article 2
</div>


<div id="article3" class="article">
  Article 3
</div>




<button class="button" id="btn1">Button 1</button>
<button class="button" id="btn2">Button 2</button>
<button class="button" id="btn3">Button 3</button>

<div id="fillMe"></div>

目前文章的编号是来自被点击按钮的id，这当然可以很容易地更改为数据文章属性或类似的东西

Answer 2

["1", "2", "3"].forEach(function(i) {
  if (true) { // I do not know why you need this though
    var content = document.getElementById("article" + i).textContent;
    var oButton = document.getElementById("btn" + i);

    oButton.addEventListener("click", function() {
      document.getElementById("fillMe").innerHTML = content;
    });
  }
});

Answer 3

如果您的文章名称和 btn 名称不是简单的 article1 、 article2 ...等等和 btn1、btn2...等等。

你可以试试这个方法

您制作了一个 class ArticleMap ，并维护了一个 articleMap 对象数组。然后其他一切都很简单，只需遍历数组并初始化点击监听器即可。

class ArticleMap{

    constructor(articleId,btnId){
        this.articleId=articleId;
        this.btnId=btnId;
    }
}

var articleArr=[new ArticleMap('x','btn1'),new ArticleMap('y','btn2'),new ArticleMap('z','btn3')];
var targetId='fillMe';
var targetElement=  document.getElementById(targetId);

articleArr.forEach(function (item){
    document.getElementById(item.btnId).addEventListener('click',function (){
        targetElement.innerHTML=document.getElementById(item.articleId).textContent;
    });
});

.article {
  display: none;
}

        <div id="x" class="article">
                Article 1
                </div>
                
                
                <div id="y" class="article">
                Article 2
                </div>
                
                
                <div id="z" class="article">
                Article 3
                </div>
                
                
                
                
                <button class ="button" id="btn1">Button 1</button>
                <button class ="button" id="btn2">Button 2</button>
                <button class ="button" id="btn3">Button 3</button>
                
                <div id="fillMe"></div>

如何减少此代码中的变量和 if 语句的数量？

How do I reduce the amount of variables and if statements in this code?

javascript

if-statement

repeat