jquery+on迭代循环我怎么知道点击了哪个元素

Question

我有一个列表，它实际上是从 JSON 派生的国旗、国家名称和国家代码

我已经编写了 for 循环来呈现这样的 html 元素

data = 

  [
  {
        "name": "INDIA ",
        "code": "93",
        "url": 'https://www.countryflags.io/in/flat/64.png' 
    }, {
        "name": "JAPAN ",
        "code": "355",
        "url": 'https://www.countryflags.io/jp/flat/64.png'
    }]

for (var i = 0; i < data.length; i++) {
  
  var countryName = data[i].name;
  var countrtDialCode = data[i].code;
  var countryUrl = data[i].url;
  var badge = document.createElement('div');
  badge.className = 'badge';
  badge.innerHTML =
  '<div id="listSection">'+
    '<div style="display:flex">'+
    '<div id="flagSection">'+'<img style="height:10px;width:20px;margin-top:4px;" src='+countryUrl+'>'+'</div>'+'&nbsp;&nbsp;'+
    '<div id="nameSection">' + countryName + '</div>' +'&nbsp;&nbsp;'+
    '<div id="codeSection">' + countrtDialCode + '</div>' 
     +'</div>'+
     '</div>'
    
  document.getElementById('countries-list').appendChild(badge);
}

我也有一个 div 部分

<div id="inputSection"> </div>

<div id="countries-list">

</div>

我已经这样做了，当您单击输入部分时，列表将会出现，我可以从列表中进行选择，并且我需要 仅应该显示标志

<script type="text/javascript">
    $(document).ready(function(){
        $('#countries-list').addClass('hideSection').removeClass('showSection')
    });
    $('#inputSection').click(function(){
        $('#countries-list').addClass('showSection').removeClass('hideSection')
    })


    </script>

所以当我从列表中单击印度 JSON 时，如果我单击输入部分列表，我应该再次在 inputSection 中显示印度标志，如果我选择 NEPAL，印度标志应该替换为 NEPAL 标志。

有 2 个问题。第一个我无法在 INNERHTML 中编写点击函数来识别点击了哪个国家，第二个是如何检索标志部分并将其显示在 inputSection 中。

任何小提琴都会非常有帮助和感激

Answer 1

如果您只需要复制输入部分中的标志部分，那么这就是您所需要的：

$('.listSection').on('click', function() {
    $('#inputSection').html( $('.flagSection', this).clone() );
});

但是，您必须将 JS 中 HTML 中出现的每个 id 转换为 class，如下面的工作演示所示。 id 属性值应该是唯一的。

$(function() {
    const data = [{
          "name": "INDIA ",
          "code": "93",
          "url": 'https://www.countryflags.io/in/flat/64.png' 
      }, {
          "name": "JAPAN ",
          "code": "355",
          "url": 'https://www.countryflags.io/jp/flat/64.png'
      }];

    for (var i = 0; i < data.length; i++) {

      var countryName = data[i].name;
      var countrtDialCode = data[i].code;
      var countryUrl = data[i].url;
      var badge = document.createElement('div');
      badge.className = 'badge';
      badge.innerHTML =
      '<div class="listSection">'+
        '<div style="display:flex">'+
        '<div class="flagSection">'+'<img style="height:10px;width:20px;margin-top:4px;" src='+countryUrl+'>'+'</div>'+'&nbsp;&nbsp;'+
        '<div class="nameSection">' + countryName + '</div>' +'&nbsp;&nbsp;'+
        '<div class="codeSection">' + countrtDialCode + '</div>' 
         +'</div>'+
         '</div>'

      document.getElementById('countries-list').appendChild(badge);
    }
    
    $('.listSection').on('click', function() {
        console.log( {name: $('.nameSection',this).text(), code: $('.codeSection', this).text()} );
        $('#inputSection').html( $('.flagSection', this).clone() );
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div id="inputSection"> </div>

<div id="countries-list">

</div>

注意

由于.html( jQueryObject ) 的文档中没有提到它甚至认为它在上面的演示中有效，我将提供一个使用.empty() 和.append() 方法的替代方法：

$('#inputSection').empty().append( $('.flagSection', this).clone() );