Javascript 根据jQuery中的用户输入从数组中获取值

我有一个字母表数组，每个字母都有一个附加的URL。我还有一个按钮列表，每个按钮对应于字母表中的一个字母

我想从数组（url）中检索值，根据用户单击的按钮，用户可以单击多个按钮

因此，如果用户单击按钮“C”，我想从数组中检索与字母“C”相关联的URL

我能够循环遍历

#字母

元素的子元素，并获得每个按钮的

id

。我想把它和阵列进行比较，但一路上我迷路了

我真的看不到解决办法

HTML

---

下面是一个片段，我获取了所有链接并附加了一个click事件，它只记录了键对应于单击按钮id的值

（函数（）{
让数组={
‘A’：’http://example.com/A.png',
“B”：”http://example.com/B.png',
‘C’：’http://example.com/C.png',
};
const buttons=document.queryselectoral（“#字母a”）；
按钮。forEach（按钮=>{
addEventListener（'click'，（e）=>console.log（数组[e.target.id]）；
});
})();
这里是一个片段，我获取了所有链接并附加了一个单击事件，它只记录了键对应于单击按钮id的值


（函数（）{
让数组={
‘A’：’http://example.com/A.png',
“B”：”http://example.com/B.png',
‘C’：’http://example.com/C.png',
};
const buttons=document.queryselectoral（“#字母a”）；
按钮。forEach（按钮=>{
addEventListener（'click'，（e）=>console.log（数组[e.target.id]）；
});
})();

使用属性并将事件侦听器添加到您的信件中，单击获取单击的项目并使用
.data（）
获取信件


$（函数（）{
让数组={
‘A’：’https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?cs=srgb&dl=beauty-bloom-blue-67636.jpg&fm=jpg'，
“B”：”https://images.pexels.com/photos/1308881/pexels-photo-1308881.jpeg?cs=srgb&dl=ao-dai-beauty-beauty-1308881.jpg&fm=jpg'，
‘C’：’https://images.pexels.com/photos/237018/pexels-photo-237018.jpeg?cs=srgb&dl=asphalt-beauty-Color-237018.jpg&fm=jpg'，
};
$（'.btn primary'）。在（'click'，function（）上{
常量字母=$（this）.data（'letter'）；
$（'#demo'）.attr（'src'，数组[字母]）；
});
});

使用属性并将事件侦听器添加到您的信件中，单击获取单击的项目并使用
.data（）
获取信件


$（函数（）{
让数组={
‘A’：’https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?cs=srgb&dl=beauty-bloom-blue-67636.jpg&fm=jpg'，
“B”：”https://images.pexels.com/photos/1308881/pexels-photo-1308881.jpeg?cs=srgb&dl=ao-dai-beauty-beauty-1308881.jpg&fm=jpg'，
‘C’：’https://images.pexels.com/photos/237018/pexels-photo-237018.jpeg?cs=srgb&dl=asphalt-beauty-Color-237018.jpg&fm=jpg'，
};
$（'.btn primary'）。在（'click'，function（）上{
常量字母=$（this）.data（'letter'）；
$（'#demo'）.attr（'src'，数组[字母]）；
});
});
如果你打算将来有更多的链接，那么用HTML编写链接是没有意义的。节省一些时间并动态生成它们。下面提供了一个可重用的函数
listLnx（）
，它将从几乎无限量URL的给定列表中生成HTML格式的
。完整的细节在演示中进行了评论


//数组的数组每个子数组都有一个键/值对
让URL=[
[A'，'https://example.com/'],
[B'，'https://stackoverflow.com'],
[D'，'https://stackoverflow.com/users/2813224/zer00ne'],
[C'，'https://css-tricks.com'],
];
/***listLnx（）
第一个参数：[数组]（见上文）
第二个参数：[String]（可选--默认值：“body”）链接所在的标记
将嵌套在
*/
/*
*A-引用父标记
*B-从数组实例化映射对象。数组是
已反转，因为链接在父级之前
*用for…of循环遍历映射。这个
方法返回键/值对数组
为便于访问，对其进行了分解
*D-An是使用.createElement（）方法创建的。这个
其余语句使用
以下:
1.身份证
2.a[href]
3.#id和主机名的文本
4.块级样式
5.然后在父标记前面加上前缀
*/
const listLnx=（数组，选择器=`body`）=>{
让node=document.querySelector（选择器）；//A
让map=newmap（array.reverse（））；//B
for（map.entries（）的常量[key，url]）{//C
常量a=document.createElement（'a'）；//D
a、 id=key；//1
a、 href=url；//2
a、 textContent=`${key}-${a.hostname}`；//3
a、 style.display='block'；//4
node.prepend（a）；//5
}
}
listLnx（url）如果你打算将来有更多的链接，那么用HTML编写链接是没有意义的。节省一些时间并动态生成它们。下面提供了一个可重用的函数
listLnx（）
，它将从几乎无限量URL的给定列表中生成HTML格式的
。完整的细节在演示中进行了评论


//数组的数组每个子数组都有一个键/值对
让URL=[
[A'，'https://example.com/'],
[B'，'https://stackoverflow.com'],
[D'，'https://stackoverflow.com/users/2813224/zer00ne'],
[C'，'https://css-tricks.com'],
];
/***listLnx（）
第一个参数：[数组]（见上文）
第二个参数：[String]（可选--默认值：“body”）链接所在的标记
将嵌套在
*/
/*
*A-引用父标记
*B-从数组实例化映射对象。数组是
<div class="col-md-12" id="letters">
   <a href="#" class="btn btn-primary" id="A">A</a>
   <a href="#" class="btn btn-primary" id="B">B</a>
   <a href="#" class="btn btn-primary" id="C">C</a>
</div>

$(function() {
    let array = {
        'A' : 'http://example.com/A.png',
        'B' : 'http://example.com/B.png',
        'C' : 'http://example.com/C.png',
    };

    $.each(array, function(key, value) {
        console.log('Initializing...', key + ' => ' + value);
    });

    let letters = $('#letters');
    $.each(letters.children(), function(i) {
        console.log(letters.children()[i].id); // get value of id tag
    });
});