gpt4 book ai didi

javascript - JS显示的列表

转载 作者:行者123 更新时间:2023-12-02 22:38:00 24 4
gpt4 key购买 nike

我想看到三个不同的列表,具体取决于我选择的列表。问题是,当我想显示第二个时,第一个不会消失(我使用了remove())。有人可以帮忙吗?第二个问题是,有没有更简单的方法用JS在ul中创建li?我猜我的代码过于复杂。 *顺便说一句,我是 JS 初学者。

function showList()
{
var games = document.getElementById("games").checked; // true;false
var movies = document.getElementById("movies").checked; // true;false
var series = document.getElementById("series").checked; // true;false

if(games == true)
{
var exists = document.getElementsByTagName("ul");
if (exists == true)
{
exists.remove();
}

var ul = document.createElement('ul');
var li = document.createElement("LI");
var content1 = document.createTextNode("Witcher");
li.appendChild(content1);
ul.appendChild(li);
document.getElementById('box_list').appendChild(ul);

var li2 = document.createElement("LI");
var content2 = document.createTextNode("GTA V");
li2.appendChild(content2);
ul.appendChild(li2);
document.getElementById('box_list').appendChild(ul);
}
if(movies == true)
{
var exists = document.getElementsByTagName("ul");
if (exists == true)
{
exists.remove();
}

var ul = document.createElement('ul');
var li = document.createElement("LI");
var content1 = document.createTextNode("Matrix");
li.appendChild(content1);
ul.appendChild(li);
document.getElementById('box_list').appendChild(ul);

var li2 = document.createElement("LI");
var content2 = document.createTextNode("The Lord of The Rings");
li2.appendChild(content2);
ul.appendChild(li2);
document.getElementById('box_list').appendChild(ul);
}
if(series == true)
{
var exists = document.getElementsByTagName("ul");
if (exists == true)
{
exists.remove();
}

var ul = document.createElement('ul');
var li = document.createElement("LI");
var content1 = document.createTextNode("Game of Throne");
li.appendChild(content1);
ul.appendChild(li);
document.getElementById('box_list').appendChild(ul);

var li2 = document.createElement("LI");
var content2 = document.createTextNode("The Walking Dead");
li2.appendChild(content2);
ul.appendChild(li2);
document.getElementById('box_list').appendChild(ul);
}

}
<小时/>
<input type="radio" name="list" id="games" onclick="showList()"/> Game <br/>
<input type="radio" name="list" id="movies" onclick="showList()"/> Movies <br/>
<input type="radio" name="list" id="series" onclick="showList()"/> Series <br/>

<p id="box_list">

</p>

最佳答案

你的代码有点乱。尝试使用少行的函数,它们会更具可读性。还要尽量避免 HTML 中的 onclick 事件,因为这是一种不好的做法(在线查看原因)。最后使用变量而不是每次都调用文档。对于您的问题,我创建了这个解决方案:

var games = document.getElementById('games');
var movies = document.getElementById('movies');
var series = document.getElementById('series');
var boxList = document.getElementById('box_list');

games.addEventListener('click', () => addToList('a','b'));
movies.addEventListener('click', () => addToList('c','d'));
series.addEventListener('click', () => addToList('e','f'));

function addToList(...names){
let ul = document.createElement('ul');
for(let name of names){
let li = document.createElement("li");
let content = document.createTextNode(name);
li.appendChild(content);
ul.appendChild(li);
}
boxList.innerHTML = '';
boxList.appendChild(ul);
}
<input type="radio" name="list" id="games" /> Game <br/>
<input type="radio" name="list" id="movies"/> Movies <br/>
<input type="radio" name="list" id="series"/> Series <br/>

<p id="box_list">
</p>
如果您不熟悉 javascript, ...names 称为扩展运算符,当您必须循环对象列表(在本例中是一些字符串)时它非常有用

关于javascript - JS显示的列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58683201/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com