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

Posted 2023-02-19

【中文标题】通过Javascript避免在html列表中的列表中重复

【英文标题】：Avoiding Duplicate in list in html list by Javascript

【发布时间】：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 是唯一的。但在你的情况下它会重复

那么有什么办法可以克服这个问题吗？

【参考方案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>