gpt4 book ai didi

javascript - 纯 Javascript 数组,使用显示数组的几个 html 按钮获取值

转载 作者:行者123 更新时间:2023-11-30 18:04:34 24 4
gpt4 key购买 nike

我是 JavaScript 新手,我正在尝试使用纯 JavaScript 和 HTML 创建一系列硬编码相册,每个相册都有一个titlecategory艺术家轨道[]。现在我卡住的地方是试图显示我的按钮数组 onclick 并根据按下的按钮显示不同。我有三个按钮:

  1. 获取所有相册
  2. 按艺术家获取所有专辑
  3. 按类别获取所有内容。

当我单击“全部”时,我会在项目符号列表中按名称获得所有相册。按艺术家我只按艺术家获得所有专辑。这是我的代码。我正在处理外部 JavaScript 文件。非常感谢任何帮助,但请不要使用 JQuery,我想用纯 JavaScript 执行此操作。

Here is a jsbin of what i have so far

here

最佳答案

这有帮助吗

<button id="b1" type="button">Get All Albums</button>
<button id="b2" type="button">Get All Albums By Artist</button>
<button id="b3" type="button">Get All By Category</button>
<table border="1">
<thead>
<tr>
<th>Title</th>
<th>Category</th>
<th>Artist</th>
<th>Tracks</th>
</tr>
</thead>
<tbody id="albums"></tbody>
</table>

var b1 = document.getElementById("b1"),
b2 = document.getElementById("b2"),
b3 = document.getElementById("b3"),
results = document.getElementById("albums"),
albums = [];

function compareTitle(a, b) {
if (a.title < b.title) {
return -1;
}

if (a.title > b.title) {
return 1;
}

return 0;
}

function compareArtist(a, b) {
if (a.artist < b.artist) {
return -1;
}

if (a.artist > b.artist) {
return 1;
}

return 0;
}

function compareCategory(a, b) {
if (a.category < b.category) {
return -1;
}

if (a.category > b.category) {
return 1;
}

return 0;
}

function addAlbum(title, category, artist, tracks) {
var album = {
"title": title,
"category": category,
"artist": artist,
"tracks": tracks
};

albums.push(album);
}

addAlbum("d", "z", "s", [1, 2, 3]);
addAlbum("c", "y", "s", [1, 2, 3]);
addAlbum("b", "x", "t", [1, 2, 3]);
addAlbum("a", "x", "u", [1, 2, 3]);

function displayAll() {
results.innerHTML = "";
albums.sort(compareTitle);

albums.forEach(function (album) {
var tr = document.createElement("tr"),
td1 = document.createElement("td"),
td2 = document.createElement("td"),
td3 = document.createElement("td"),
td4 = document.createElement("td");

td1.textContent = album.title;
td2.textContent = album.category;
td3.textContent = album.artist;
td4.textContent = album.tracks.toString();

tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);
tr.appendChild(td4);
results.appendChild(tr);
});
}

function displayArtist() {
results.innerHTML = "";
albums.sort(compareArtist);

albums.forEach(function (album) {
var tr = document.createElement("tr"),
td1 = document.createElement("td"),
td2 = document.createElement("td"),
td3 = document.createElement("td"),
td4 = document.createElement("td");

td1.textContent = album.title;
td2.textContent = album.category;
td3.textContent = album.artist;
td4.textContent = album.tracks.toString();

tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);
tr.appendChild(td4);
results.appendChild(tr);
});
}

function displayCategory() {
results.innerHTML = "";
albums.sort(compareCategory);

albums.forEach(function (album) {
var tr = document.createElement("tr"),
td1 = document.createElement("td"),
td2 = document.createElement("td"),
td3 = document.createElement("td"),
td4 = document.createElement("td");

td1.textContent = album.title;
td2.textContent = album.category;
td3.textContent = album.artist;
td4.textContent = album.tracks.toString();

tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);
tr.appendChild(td4);
results.appendChild(tr);
});
}

b1.addEventListener("click", displayAll, false);
b2.addEventListener("click", displayArtist, false);
b3.addEventListener("click", displayCategory, false);

关于 jsfiddle

关于javascript - 纯 Javascript 数组,使用显示数组的几个 html 按钮获取值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16111421/

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