在 Jquery 中，许多函数都有几十个选择器（从“#A1”到“#A300”）。我想通过索引简化为数组，每个，forEach，var

Posted 2023-05-09

【中文标题】在 Jquery 中，许多函数都有几十个选择器（从“#A1”到“#A300”）。我想通过索引简化为数组，每个，forEach，var

【英文标题】：In Jquery, many functions with dozens of selectors(from “#A1” to “#A300”). I want to simplify to array through index, each, forEach, var

【发布时间】：2021-02-10 06:34:35

【问题描述】：

我有功能代码：

$(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"] 每个索引...

【参考方案1】：

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

const data = 
  A1:  bb: 'apple', cc: '0,1', dd: '0.1',
  A2:  bb: 'fruit', cc: '0,2', dd: '0.2',
  A3:  bb: 'mango', cc: '0,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>

【讨论】：

是的，功能强大，谢谢 Charlie，但是有没有办法通过 .each() 函数来进一步简化，比如 var a = ["#A1", "#A2", "#A3"] , var b = ["apple", "0,1", "0.1"], ["fruit", "0,2", "0.2"], ["mango", "0,3", "0.3" ] .. 或任何类似的想法...？