javascript - jquery关联两个数组

Question

如果您对此有任何帮助，我将不胜感激。有什么办法可以简化这段代码吗？我想将两个数组的元素与相同的索引配对以执行特定功能。

  var insects = ['#redhairy', '#bollworm', '#stalk', '#stem', '#chuija', '#diamond', '#pyrilla'];
var plants = ['.groundnut', '.cotton', '.maize', '.rice', '.wheat', '.mustard', '.sugarcane'];


$(insects[0]).hover(function(){
  $(plants[0]).toggleClass('active');
});

$(insects[1]).hover(function(){
  $(plants[1]).toggleClass('active');
});

$(insects[2]).hover(function(){
  $(plants[2]).toggleClass('active');
});

$(insects[3]).hover(function(){
  $(plants[3]).toggleClass('active');
});

$(insects[4]).hover(function(){
  $(plants[4]).toggleClass('active');
});

$(insects[5]).hover(function(){
  $(plants[5]).toggleClass('active');
});

$(insects[6]).hover(function(){
  $(plants[6]).toggleClass('active');
});

Answer 1

如果您有权访问 HTML，则可以将 data 属性添加到接收悬停事件的元素，悬停事件是要切换类的元素的选择器。这样您就可以将它们归为一个公共(public)类，并且只使用一个选择器，如下所示:

$('.item').hover(function() {
  $($(this).data('target')).toggleClass('active');
});

.active { 
  color: #C00; 
  font-weight: bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="redhairy" class="item" data-target=".groundnut">Red hariy</div>
<div id="bollworm" class="item" data-target=".cotton">Bollworm</div>

<div class="groundnut">Groundnut</div>
<div class="cotton">Cotton</div>

或者，如果您不能修改 HTML，您可以遍历数组并在每个元素上单独放置一个事件处理程序，使用循环索引从数组中获取每个项目:

var insects = ['#redhairy', '#bollworm', '#stalk', '#stem', '#chuija', '#diamond', '#pyrilla'];
var plants = ['.groundnut', '.cotton', '.maize', '.rice', '.wheat', '.mustard', '.sugarcane'];

insects.forEach(function(insect, i) {
  $(insect).hover(function() {
    $(plants[i]).toggleClass('active');
  });
});

.active { 
  color: #C00; 
  font-weight: bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="redhairy" class="item">Red hariy</div>
<div id="bollworm" class="item">Bollworm</div>

<div class="groundnut">Groundnut</div>
<div class="cotton">Cotton</div>

请注意，第一种方法是修改 HTML，远这里是更好的选择。另请注意，forEach() 依赖于浏览器对 ES2015 的支持。如果您需要支持旧版浏览器(例如 IE)，则需要使用 polyFill 或 for() 循环。