javascript - 通过Javascript避免在html列表中的列表中重复

Question

我有一个 HTML 列表，它是根据来自 Json 的值打印的。我在 html 中有一个按钮

 <button onclick="printJsonList()">CLICK</button>

它运行这个 Javascript

function printJsonList(){
    console.log(ctNameKeep);
            var ctList = []; var ctRight = [];
            var ctNameKeep = [];
            var $tBody = $("#La");
            var $rbody = $("#accordian");

            $.getJSON('https://api.myjson.com/bins/n0u2o' , function (data) {
                    data.forEach((CTLIST) => {
                        if(ctNameKeep.includes(CTLIST.ct)){
                            return ;
                        }
                        else {
                   ctNameKeep.push(CTLIST.ct);
                        $tBody.append(`<li class="list-group-item" id="rl">
                        <span id="nameOfCt">${CTLIST.ct}</span>
                                <a href="#${CTLIST.ct}" class="btn btn-danger show" data-toggle="collapse">View More</a>

                         <div id="${CTLIST.ct}" class="collapse valueDiv">
                              <label>TTS</label> <input id="tts" type="text" value="${CTLIST.tts}"><br>
                              <label>Topic Level</label> <input id="topic_level" type="text" value="${CTLIST.topic_level}"><br> 
                              <label>TimeOut</label> <input id="timeout" type="text" value="${CTLIST.timeout}"><br>
                                <label>To be shown individually</label> <input id="to_be_shown_individually" type="checkbox" ${(CTLIST.to_be_shown_individually && 'checked')}> <br>
                              <label>check for geometry</label><input id="check_for_geometry" type="checkbox" ${(CTLIST.check_for_geometry && 'checked')}><br>
                              <label>check_for_image_labelling</label> <input id="check_for_image_labelling" type="checkbox" ${(CTLIST.check_for_image_labelling && 'checked')}> <br>         
                     </div>        

                        </li>`);
                    } //else 
                    });
            })
            console.log(ctNameKeep)
    }

我将 ct 的名称存储在一个数组中，并检查 ctNameKeep 数组是否包含该名称，只是避免打印列出的元素。它在第一次点击按钮时工作良好。但是当我再次单击按钮时，它会再次打印列表。但我想要的是，如果用户第二次或第三次单击按钮，则不应打印 html 列表数组中具有相同名称 ct 的列表。函数运行多少次并不重要。我面临的问题是我想在一个函数中完成所有这些，没有什么可以是全局的。请提供任何可能的解决方案或替换。

Answer 1

通过一些参数绑定(bind)一个函数

考虑在一个完美的世界中:

function printJsonList(ctNameKeep){
  someajaxcall(function(something){
    ctNameKeep.push(something)
  })
}

然后就可以创建

const printJsonList2 = printJsonList.bind(null, [])

任何调用 printJsonList2实际上会调用printJsonList([]) .

您可以根据自己的喜好修改引用的数组。

因此 <button onclick="printJsonList2()"></button>

通过“组件”

做一些组件很时髦。

您可以让一个人负责处理您的按钮。

const myBtn = ((btn => {
  let ctNameKeep = [] // ctNameKeep not global anymore
  function printJsonList(){ctNameKeep.push('..')}
  btn.addEventListener('click', printJsonList)
  return {somemethodsForYourComponent} // you don't need this though
})(document.querySelector('button'))

---

const printJsonList = (function (ctNameKeep) {
  ctNameKeep.push(String.fromCharCode(65+Math.floor(Math.random()*26)))
  console.log('ctNameKeep', ctNameKeep)
}).bind(null, [])

;(btn => {
  let ctNameKeep = []
  function printJsonList () {
    ctNameKeep.push(String.fromCharCode(65+Math.floor(Math.random()*26)))
    console.log('anotherone', ctNameKeep)
  }

  btn.addEventListener('click', printJsonList)
})(document.getElementsByTagName('button')[1])

<div>
<button onclick="printJsonList()">clickbind</button>
<button>clickcomp</button>
</div>