用Javascript避免html列表中的重复

我有一个HTML列表，它通过Json中的comign值进行打印。我有一个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)
    }

函数printJsonList（）{ console.log（ctNameKeep）； var ctList=[]；var ctRight=[]； var ctnamecept=[]； var$tBody=$（“#La”）； var$rbody=$（“#手风琴”）； $.getJSON（'https://api.myjson.com/bins/n0u2o，函数（数据）{ data.forEach（（CTLIST）=>{ if（ctnameckeep.includes（CTLIST.ct））{ 返回； } 否则{ ctnameckeep.push（CTLIST.ct）； $tBody.append（`

${CTLIST.ct} TTS
主题级别
超时
单独显示
检查几何图形
检查图像标签

`）； }//否则 }); }) console.log（ctNameKeep） } 我将ct的名称存储在一个数组中，并检查ctNameKeep数组是否包含该名称，以避免打印列出该项的内容。第一次点击按钮就可以了。但当我再次点击按钮时，它会再次打印列表。但我想要的是，如果用户第二次或第三次单击按钮，则html列表数组中具有相同名称ct的列表不应打印。函数运行多少次并不重要。我面临的问题是我想在一个函数中完成所有这些，没有什么是全局的。请给出任何可能的解决方案或替换方案

通过将函数与一些参数绑定 考虑在一个完美的世界中：

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

然后您可以创建

const printJsonList2=printJsonList.bind（null，[]）

任何对

printJsonList2

的调用实际上都会调用

printJsonList（[]）

引用的数组可以根据自己的喜好进行修改

因此

按“组成部分” 制造一些组件是一种潮流

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

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'))

---

constprintJSonList=（函数（ctNameKeep）{
ctNameKeep.push（String.fromCharCode（65+Math.floor（Math.random（）*26）））
console.log（'ctNameKeep'，ctNameKeep）
}).bind（空，[]）
;（btn=>{
让ctNameKeep=[]
函数printJsonList（）{
ctNameKeep.push（String.fromCharCode（65+Math.floor（Math.random（）*26）））
console.log（'anotherone'，ctNameKeep）
}
btn.addEventListener（'click'，printJsonList）
})（document.getElementsByTagName（'button'）[1]）

点击绑定
点击comp

在您修复了id atribute的循环中，id是唯一的。但是在您的情况下，它会重复。那么有什么办法可以克服这个问题吗？