Un-Hardcode and make jQuery code modulair

Question

I have a simple jQuery mechanism which highlights the words that are being hovered and permanently highlights them when you click on them (until you click again).

My HTML structure is the following:

<div class="weergave-area">

<p class='weergave weergave1'>Random</p>
<p class='weergave weergave2'>Words</p>
<p class='weergave weergave3'>Which</p>
<p class='weergave weergave4'>Are</p>
<p class='weergave weergave5'>Being</p>
<p class='weergave weergave6'>Hovered</p>
<p class='weergave weergave7'>And</p>
<p class='weergave weergave8'>Being</p>
<p class='weergave weergave9'>Clicked</p>

</div>

<div class="woord-area">

    <p class='woord woord1'>Words</p>
    <p class='woord woord2'>That</p>
    <p class='woord woord3'>Change</p>
    <p class='woord woord4'>When</p>
    <p class='woord woord5'>The</p>
    <p class='woord woord6'>Right</p>
    <p class='woord woord7'>Weergave</p>
    <p class='woord woord8'>Is</p>
    <p class='woord woord9'>Hovered</p>

</div>

For the hover over the 'weergave' I have the following (hard-coded) mechanism:

     $(".weergave1").mouseover(function(){
         $(".woord1").css("background-color", "#A2D165");
         $(".weergave1").css("background-color", "#A2D165");
     });

     $(".weergave2").mouseover(function(){
         $(".woord2").css("background-color", "#5E35B1");
         $(".weergave2").css("background-color", "#5E35B1");
     });

     $(".weergave3").mouseover(function(){
         $(".woord3").css("background-color", "#CDDC39");
         $(".weergave3").css("background-color", "#CDDC39");
     });

     $(".weergave4").mouseover(function(){
         $(".woord4").css("background-color", "#FFEB3B");
         $(".weergave4").css("background-color", "#FFEB3B");
     });

      $(".weergave5").mouseover(function(){
         $(".woord5").css("background-color", "#FF9800");
         $(".weergave5").css("background-color", "#FF9800");
     });

     $(".weergave6").mouseover(function(){
         $(".woord6").css("background-color", "#9E9E9E");
         $(".weergave6").css("background-color", "#9E9E9E");
     });

     $(".weergave7").mouseover(function(){
         $(".woord7").css("background-color", "#795548");
         $(".weergave7").css("background-color", "#795548");
     });

     $(".weergave8").mouseover(function(){
         $(".woord8").css("background-color", "#FF5722");
         $(".weergave8").css("background-color", "#FF5722");
     });

     $(".weergave9").mouseover(function(){
         $(".woord9").css("background-color", "#607D8B");
         $(".weergave9").css("background-color", "#607D8B");
     });

     $(".weergave").mouseout(function(){
         $(".woord").css("background-color", "none");
         $(".weergave").css("background-color", "none");
    });

For the Click I have the following (hard-coded) jQuery mechanism and CSS which adds to it:

        $(".weergave1").click(function(){

          $(".weergave1").toggleClass("active");
          $(".woord1").toggleClass("active");

    });

    $(".weergave2").click(function(){

          $(".weergave2").toggleClass("active");
          $(".woord2").toggleClass("active");

    });

    $(".weergave3").click(function(){

          $(".weergave3").toggleClass("active");
          $(".woord3").toggleClass("active");

    });

    $(".weergave4").click(function(){

          $(".weergave4").toggleClass("active");
          $(".woord4").toggleClass("active");

    });

    $(".weergave5").click(function(){

          $(".weergave5").toggleClass("active");
          $(".woord5").toggleClass("active");

    });

    $(".weergave6").click(function(){

          $(".weergave6").toggleClass("active");
          $(".woord6").toggleClass("active");

    });

    $(".weergave7").click(function(){

          $(".weergave7").toggleClass("active");
          $(".woord7").toggleClass("active");

    });

    $(".weergave8").click(function(){

          $(".weergave8").toggleClass("active");
          $(".woord8").toggleClass("active");

    });

    $(".weergave9").click(function(){

          $(".weergave9").toggleClass("active");
          $(".woord9").toggleClass("active");

    });

.weergave1.active {
    background-color: #A2D165;
}   

.woord1.active {
    background-color: #A2D165;
}   

.weergave2.active {
    background-color: #5E35B1;
}   

.woord2.active {
    background-color: #5E35B1;
}

.weergave3.active {
    background-color: #CDDC39;
}   

.woord3.active {
    background-color: #CDDC39;
}

.weergave4.active {
    background-color: #FFEB3B;
}   

.woord4.active {
    background-color: #FFEB3B;
}

.weergave5.active {
    background-color: #FF9800;
}   

.woord5.active {
    background-color: #FF9800;
}

.weergave6.active {
    background-color: #9E9E9E;
}   

.woord6.active {
    background-color: #9E9E9E;
}

.weergave7.active {
    background-color: #795548;
}   

.woord7.active {
    background-color: #795548;
}

.weergave8.active {
    background-color: #FF5722;
}   

.woord8.active {
    background-color: #FF5722;
}

.weergave9.active {
    background-color: #607D8B;
}   

.woord9.active {
    background-color: #607D8B;
}

This makes it so that when I hover on for example 'weergave1' > 'woord1' 'weergave1' get a unique color and when 'weergave1' is clicked they both get that color permanently until it is clicked again.

Is has to be done with jQuery, not with CSS or something else.

Answer 1

One of the options is to add data attributes to the weergave elements and use them to select corresponding woord elements.

function toggle() {
  var $this = $(this);
  $('.woord[data-num=' + $this.data('num') + ']').add($this).toggleClass('active');
}
$('.weergave').on('click mouseover mouseout', toggle);
  

.weergave1.active {
  background-color: #A2D165;
}
.woord1.active {
  background-color: #A2D165;
}
.weergave2.active {
  background-color: #5E35B1;
}
.woord2.active {
  background-color: #5E35B1;
}
.weergave3.active {
  background-color: #CDDC39;
}
.woord3.active {
  background-color: #CDDC39;
}
.weergave4.active {
  background-color: #FFEB3B;
}
.woord4.active {
  background-color: #FFEB3B;
}
.weergave5.active {
  background-color: #FF9800;
}
.woord5.active {
  background-color: #FF9800;
}
.weergave6.active {
  background-color: #9E9E9E;
}
.woord6.active {
  background-color: #9E9E9E;
}
.weergave7.active {
  background-color: #795548;
}
.woord7.active {
  background-color: #795548;
}
.weergave8.active {
  background-color: #FF5722;
}
.woord8.active {
  background-color: #FF5722;
}
.weergave9.active {
  background-color: #607D8B;
}
.woord9.active {
  background-color: #607D8B;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="weergave-area">

  <p class='weergave weergave1' data-num="1">Random</p>
  <p class='weergave weergave2' data-num="2">Words</p>
  <p class='weergave weergave3' data-num="3">Which</p>
  <p class='weergave weergave4' data-num="4">Are</p>
  <p class='weergave weergave5' data-num="5">Being</p>
  <p class='weergave weergave6' data-num="6">Hovered</p>
  <p class='weergave weergave7' data-num="7">And</p>
  <p class='weergave weergave8' data-num="8">Being</p>
  <p class='weergave weergave9' data-num="9">Clicked</p>

</div>

<div class="woord-area">

  <p class='woord woord1' data-num="1">Words</p>
  <p class='woord woord2' data-num="2">That</p>
  <p class='woord woord3' data-num="3">Change</p>
  <p class='woord woord4' data-num="4">When</p>
  <p class='woord woord5' data-num="5">The</p>
  <p class='woord woord6' data-num="6">Right</p>
  <p class='woord woord7' data-num="7">Weergave</p>
  <p class='woord woord8' data-num="8">Is</p>
  <p class='woord woord9' data-num="9">Hovered</p>

</div>

Answer 2

You can use index() to fetch the index of element clicked, then .eq(index) can be used to fetch the relevant element.

$('.weergave').click(function() {
  var woord = $('.woord-area .woord').eq($(this).index());
  woord.add(this).toggleClass('active');
});

.active {
  background-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="weergave-area">

  <p class='weergave weergave1'>Random</p>
  <p class='weergave weergave2'>Words</p>
  <p class='weergave weergave3'>Which</p>
  <p class='weergave weergave4'>Are</p>
  <p class='weergave weergave5'>Being</p>
  <p class='weergave weergave6'>Hovered</p>
  <p class='weergave weergave7'>And</p>
  <p class='weergave weergave8'>Being</p>
  <p class='weergave weergave9'>Clicked</p>

</div>

<div class="woord-area">

  <p class='woord woord1'>Words</p>
  <p class='woord woord2'>That</p>
  <p class='woord woord3'>Change</p>
  <p class='woord woord4'>When</p>
  <p class='woord woord5'>The</p>
  <p class='woord woord6'>Right</p>
  <p class='woord woord7'>Weergave</p>
  <p class='woord woord8'>Is</p>
  <p class='woord woord9'>Hovered</p>

</div>