Question

我有一个简单的jQuery机制，它突出显示正在悬停的单词，并在您单击它们时永久突出显示它们（直到您再次单击）。

我的HTML结构如下：

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

将鼠标悬停在＆＃39; weergave＆＃39;我有以下（硬编码）机制：

     $(".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");
    });

对于Click我有以下（硬编码）jQuery机制和CSS添加到它：

        $(".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;
}

这使得当我将鼠标悬停在例如＆＃39; weergave1＆＃39; ＆GT; ＆＃39; woord1＆＃39; ＆＃39; weergave1＆＃39;得到一种独特的颜色，当＆＃39; weergave1＆＃39;单击后，它们都会永久获得该颜色，直到再次单击它为止。

必须使用jQuery，而不是使用CSS或其他东西。

Answer 1

其中一个选项是向weergave元素添加数据属性，并使用它们来选择相应的woord元素。

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

您可以使用index()获取所点击元素的索引，然后.eq(index)可用于获取相关元素。

＆＃13;

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

＆＃13;

.active {
  background-color: green;
}

＆＃13;

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

＆＃13;

Un-Hardcode和make jQuery code modulair

2 个答案: