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，当然可以轻松地将其更改为data-article属性或类似的内容

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 ...等等。

您可以尝试这种方法

您将创建一个ArticleArticle类，并维护一个articleMap对象数组。然后，其他所有操作都很简单，只需遍历数组并初始化Click侦听器即可。

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语句的数量？

3 个答案: