javascript - jQuery 根据用户输入从数组中获取值

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

使用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="" />