Question

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

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

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

我能够遍历#letters元素的子元素，并获得每个按钮的id。我曾想过以某种方式将其与数组进行比较，但一路上迷路了。

我真的看不见解决方案。

HTML

<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>

JavaScript

$(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
    });
});

Answer 1

这是一个片段，我可以获取所有链接并在其上附加一个click事件，该事件仅记录键对应于所单击按钮ID的值

(function(){
    let array = {
        'A' : 'http://example.com/A.png',
        'B' : 'http://example.com/B.png',
        'C' : 'http://example.com/C.png',
    };
    
    const buttons = document.querySelectorAll('#letters a');
    buttons.forEach(button => {
      button.addEventListener('click', (e) => console.log(array[e.target.id]));
    });
})();

<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>

Answer 2

使用data-*属性并将事件侦听器添加到您的信件中，单击获取点击的项目并使用.data()获得信件。

$(function() {
    let array = {
        '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-beautiful-beauty-1308881.jpg&fm=jpg',
        'C' : 'https://images.pexels.com/photos/237018/pexels-photo-237018.jpeg?cs=srgb&dl=asphalt-beauty-colorful-237018.jpg&fm=jpg',
    };
  
  $('.btn-primary').on('click', function() {
    
    const letter = $(this).data('letter');

    $('#demo').attr('src', array[letter]);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <div class="col-md-12" id="letters">
   <a href="#" data-letter="A" class="btn btn-primary" id="A">A</a>
   <a href="#" data-letter="B" class="btn btn-primary" id="B">B</a>
   <a href="#" data-letter="C" class="btn btn-primary" id="C">C</a>
</div>
  <img width="300" id="demo" src="" />

Answer 3

如果您打算将来增加链接，那么用HTML编写链接是没有意义的。节省一些时间并动态生成它们。下面提供了一个可重用的函数listLnx()，该函数将从几乎无限数量的url的给定列表中以HTML形式生成<a>。演示中将评论全部详细信息。

// An Array of Arrays each sub-array has a key/value pair
let urls = [
  ['A', 'https://example.com/'],
  ['B', 'https://stackoverflow.com'],
  ['D', 'https://stackoverflow.com/users/2813224/zer00ne'],
  ['C', 'https://css-tricks.com'],
];

/*** listLnx()
1st Param: [Array] (see above)
2nd Param: [String] (optional--default: "body") the tag in which the links 
           will be nested within
*/
/*
*A - Reference the parent tag
*B - Instantiate  Map Object from the array. Array is 
     reversed because the links are prepended to parent
*C - Iterate through map with a for...of loop. The       
     entries() method returns an array of key/value pairs
     which is destructured for easy access
*D - An <a> is created with .createElement() method. The 
     remaining statements assemble each link with the
     following: 
     1. an #id
     2. a [href]
     3. text of #id and hostname
     4. block level style
     5. then prepended to parent tag
*/
const listLnx = (array, selector = `body`) => {
  let node = document.querySelector(selector); //A
  let map = new Map(array.reverse()); //B

  for (const [key, url] of map.entries()) { //C
    const 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(urls);

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

3 个答案: