在Jquery中，许多功能带有数十个选择器从“＃A1”到“＃A300”我想简化通过索引数组，每个，forEach，var

问题描述

我有功能代码：

$(function(){
  $("#A1").click(function(){
  $(".bb").text("apple");
  $(".cc").text("0,1");
  $(".dd").val("0.1");
  });
  })
  
  $(function(){
  $("#A2").click(function(){
  $(".bb").text("fruit");
  $(".cc").text("0,2");
  $(".dd").val("0.2");
  });
  })

  $(function(){
  $("#A3").click(function(){
  $(".bb").text("mango");
  $(".cc").text("0,3");
  $(".dd").val("0.3");
  });
  })

实际上，我的功能代码中有数百个函数事件，这些事件的选择器从“＃A1”到“＃A300”，并且我想通过索引，每个变量简化为任何数组……请问，有人可以帮忙吗？ .dd代表值...我想要的是任何数组var X = [“＃A1”，“＃A2”，“＃A3”]，var y = [“ apple”，“ 0,1”，“ 0.1” ]，var q = [“ fruit”，“ 0,2”，“ 0.2”] var w = [“ mango”，“ 0,3”，“ 0.3”]每个，索引...

解决方法

一种方法是以下对象结构，其中主要对象键与元素的ID相匹配，而您只需向这些元素添加一个通用类

const data = {
  A1: { bb: 'apple',cc: '0,1',dd: '0.1'},A2: { bb: 'fruit',2',dd: '0.2'},A3: { bb: 'mango',3',dd: '0.3'}
}

$(".myClass").click(function() {
  const selectedData = data[this.id];
  $(".bb").text(selectedData.bb);
  $(".cc").text(selectedData.cc);
  $(".dd").val(selectedData.dd);
});

li{ display: inline; margin-right:1em; cursor:pointer}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li class="myClass" id="A1" href="">A1</li>
  <li class="myClass" id="A2" href="">A2</li>
  <li class="myClass" id="A3" href="">A3</li>
</ul>

<div>
  <div>BB : <span class="bb"></span></div>
  <div>CC : <span class="cc"></span></div>
  <div>DD : <input class="dd" /></div>
</div>