CODEWITHSUNDEEP
javascriptjqueryarrays
Adolf Presley
Adolf Presley

Reputation: 23

Jquery associate two arrays

I would realy appreciate any help with this. Is there any way to simplify this code? I would like to pair elements of both arrays with the same index to perform specific functions.

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

Upvotes: 2

Views: 39

Answers (2)

kevin ternet
kevin ternet

Reputation: 4612

You could build a matrix (2D Array) with per line the insect and its plant. this build is easy with map().

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

Upvotes: 0

Rory McCrossan
Rory McCrossan

Reputation: 337560

If you have access to the HTML you could add a data attribute to the elements which receive the hover event which is the selector for the element that is to have the class toggled. This way you can group them with a common class and only use one selector, like this:

$('.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>

Alternatively, if you can't amend the HTML you could loop through the array and put a event handler on each element individually, using the index of the loop to get each item from the array:

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>

Note that the first method, which amends the HTML, is by far the better option here. Also note that forEach() relies on browser support of ES2015. If you need to support older browsers (such as IE) you'll need to use a polyFill, or a for() loop instead.

Upvotes: 1

Related Questions