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属性，该事件是要切换类的元素的选择器。这样，您可以使用公共类对它们进行分组，并且只使用一个选择器，如下所示：

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

＆＃13;

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');
  });
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

Answer 2

你可以建立一个矩阵（2D阵列），每行昆虫及其植物。使用map（）可以很容易地构建这个构建。

＆＃13;

var insects = ['#redhairy', '#bollworm', '#stalk', '#stem', '#chuija', '#diamond', '#pyrilla'];
var plants = ['.groundnut', '.cotton', '.maize', '.rice', '.wheat', '.mustard', '.sugarcane'];
var pairs = insects.map((x,i) => [x, plants[i]]);
console.log(pairs);

＆＃13;

Jquery关联两个数组

2 个答案: