通过Javascript避免在html列表中的列表中重复答案

【问题标题】：Avoiding Duplicate in list in html list by Javascript通过Javascript避免在html列表中的列表中重复
【发布时间】：2020-04-01 01:00:25
【问题描述】：

我有一个 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 的列表。函数运行多少次并不重要。我面临的问题是我想在一个函数中完成所有这些，没有什么是全局的。请给出任何可能的解决方案或替代方案。

【问题讨论】：

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

标签： javascript jquery html css ajax

【解决方案1】：

通过一些参数绑定一个函数

考虑拥有一个完美的世界：

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>

【讨论】：