Just Code It Just Code It - 3 months ago 10
jQuery Question

How to use a $(this) function from the child for the parent within a selector?

How do I use a

$(this)
from the main selector form a child selector? I'm creating this for a highlighting program. On click of
#red_box
, you can change the color of the original highlight (
.green_mark
).

The Problem

I'm using
$(this)
to apply to
.green_mark
and not to
#red_box
.

What I've Tried

I've tried adding a variable inside of the mouse over function, but before the red_box click function:

var green_this = $(this);


I would then use
green_this
inside of the red_box click function. The problem, it changes all of the
.green_mark's
. I only want to change this particular .green_mark.

How can I solve this?

My Code:

$(".green_mark").mouseover(function() {
$("#red_box").click(function() {
$(this).attr("class","red_mark");
});
});


EDIT



When you mouseover
.green_mark
, a div appears, that contains
#red_box
. Why is this? This div allows you to change the color of your current highlight? I need to use
$(this)
to only direct this only type of highlight and not all instances of the same color. .green_mark and #red_box have no parent/child relationship. Their only relationship is in the select statement.

EDIT 2



I keep getting requests for the HTML. I have resisted because it will only make this problem more complicated. But here is the HTML:

NOTE: The SO Editor is messing up the effect for the offset for the
.green_mark
.



$(".green_mark").mouseover(function() {
var offsets = $(this).offset();
var top = offsets.top;
var new_top = top - 10;
var left = offsets.left;
var new_left = left - 10;
$('#change_color').css({
'top':new_top+'px',
'left':new_left+'px'
});

$("#blue_box2").click(function() {
alert("This selector here");
});

});

#change_color {
position:absolute;
border:grey solid 1px;
background: #373737;
padding: 5px;
border-radius: 3px;
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Chrome/Safari/Opera */
-khtml-user-select: none; /* Konqueror */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently
not supported by any browser */
}

.blue_mark {
background: #AAF6FF;
cursor: pointer;
}

.red_mark {
background: #FF9B9F;
cursor: pointer;
}

.green_mark {
background: #D6FFAA;
cursor: pointer;
}

.yellow_mark {
background: #FFF8AA;
cursor: pointer;
}

.orange_mark {
background: #FFBF98;
cursor: pointer;
}

.purple_mark {
background: #D7D5FC;
cursor: pointer;
}

.boxes, .boxes2 {
width: 15px;
height: 15px;
cursor: pointer;
display: inline-block;
margin-right: 2px;
position: relative;
top: 3px;
}

#blue_box2 {
background: #AAF6FF;
}

#green_box2 {
background: #D6FFAA;
}

#orange_box2 {
background: #FFBF98;
}

#purple_box2 {
background: #D7D5FC;
}

#red_box2 {
background: #FF9B9F;
}

#yellow_box2 {
background: #FFF8AA;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id='actual_verse' class='context'>Lore<span class="orange_mark">m ipsum dolor sit amet, iisque scripserit nec at, an case ponderum mea, delectus volupt</span>aria in quo. Te aliquid ce<span class="red_mark">teros legendos has. Veritus assueverit intelleg</span>eba<span class="orange_mark">t id per</span>, eos cu vero pri<span class="green_mark">mis philo</span>sophia, no nec blandit propriae<span class="green_mark">. Mei stet ferri aperiri eu. Mucius deserunt sensibus eum id.

Ut cas</span>e nominavi pro, <span class="yellow_mark">dico reprimique suscipiantur in per. Cu vocibus ceteros sententiae mel. Nam te diam ornatus, mei sonet volutpat facilisis ut. Minim mazim persequeri</span>s sed id, mei et animal equidem, clita atomorum at has. <span class="green_mark">Ut noluisse placerat suscipiantur mel</span>, cu pri mundi dicunt <span class="green_mark">praesent. Ignota dicunt vulputate ad vim, </span>populo option aperiri <span class="orange_mark">me</span><span class="purple_mark">l in. Has cu essent eirmod malorum, nisl electram pri et.

In legimus posidonium his, aeque possit platonem vel ne, nam ad meis nemore delenit. Cu discere legimus eam. Eum eius nostro ad, pro solet semper per</span><span class="orange_mark">fe</span>cto ne, et eros dicam tantas pro. Ex malorum debitis cotidieque pro. Vel in legendos elaboraret conclusionemque, mutat moderatius cotidieque cu usu, mel copiosae assueverit ne. Odio imperdiet eos in, cum sint porro splendide ne, tritani aliquam eum ne.

Mel feugiat recusabo platonem ei, sea cu numquam constituam. Ne tempor postea vim. Ad volumus accumsan apeirian has. At ius aliquid convenire, id est aliquip vivendo accusam.

Solum scaevola ius ut, cum no mutat sadipscing. Mei te dico dolor scaevola, cu veri dictas sit, an per nullam oblique. Ex sit sale quidam reprehendunt, diam velit lucilius nam ne, mnesarchum efficiendi his ut. Nec vivendo mediocrem delicatissimi id, ad debet maiorum qui. No qui latine dolorum corpora, diam cetero insolens in cum.</span>

<div id='change_color'>
<div id='blue_box2' class='boxes2' title='Blue'></div>
<div id='green_box2' class='boxes2' title='Green'></div>
<div id='yellow_box2' class='boxes2' title='Yellow'></div>
<div id='orange_box2' class='boxes2' title='Orange'></div>
<div id='purple_box2' class='boxes2' title='Purple'></div>
<div id='red_box2' class='boxes2' title='Red'></div>
</div>




Answer

Like this.

$(".green_mark").mouseover(function() {
    var $green = $(this);
    var offsets = $(this).offset();
    var top = offsets.top;
    var new_top = top - 10;
    var left = offsets.left;
    var new_left = left - 10;
    $('#change_color').css({
  'top':new_top+'px',
  'left':new_left+'px'
    });

  $("#blue_box2").click(function() {
    console.log($green.text());
  });

 });

But note you assign a LOT of clicks when mousing over. You need only one

How to create click event handler inside mouseover event handler?

I think you might want to do this instead

var $over;
$(function() {
  $(".boxes2").on("click",function() {
    $over.css({color:this.title});
  });


  $(".mark").mouseover(function() {
    $over = $(this);
    var offsets = $(this).offset();
    var top = offsets.top;
    var new_top = top - 10;
    var left = offsets.left;
    var new_left = left - 10;
    $('#change_color').css({
      'top': new_top + 'px',
      'left': new_left + 'px'
    });

  });
});
#change_color {
  position: absolute;
  border: grey solid 1px;
  background: #373737;
  padding: 5px;
  border-radius: 3px;
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Chrome/Safari/Opera */
  -khtml-user-select: none;
  /* Konqueror */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
  /* Non-prefixed version, currently
                                  not supported by any browser */
}
.blue_mark {
  background: #AAF6FF;
  cursor: pointer;
}
.red_mark {
  background: #FF9B9F;
  cursor: pointer;
}
.green_mark {
  background: #D6FFAA;
  cursor: pointer;
}
.yellow_mark {
  background: #FFF8AA;
  cursor: pointer;
}
.orange_mark {
  background: #FFBF98;
  cursor: pointer;
}
.purple_mark {
  background: #D7D5FC;
  cursor: pointer;
}
.boxes,
.boxes2 {
  width: 15px;
  height: 15px;
  cursor: pointer;
  display: inline-block;
  margin-right: 2px;
  position: relative;
  top: 3px;
}
#blue_box2 {
  background: #AAF6FF;
}
#green_box2 {
  background: #D6FFAA;
}
#orange_box2 {
  background: #FFBF98;
}
#purple_box2 {
  background: #D7D5FC;
}
#red_box2 {
  background: #FF9B9F;
}
#yellow_box2 {
  background: #FFF8AA;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id='actual_verse' class='context'>Lore<span class="orange_mark mark">m ipsum dolor sit amet, iisque scripserit nec at, an case ponderum mea, delectus volupt</span>aria in quo. Te aliquid ce<span class="red_mark mark">teros legendos has. Veritus assueverit intelleg</span>eba
<span
class="orange_mark mark">t id per</span>, eos cu vero pri<span class="green_mark mark">mis philo</span>sophia, no nec blandit propriae<span class="green_mark mark">. Mei stet ferri aperiri eu. Mucius deserunt sensibus eum id.

Ut cas</span>e nominavi pro, <span class="yellow_mark mark">dico reprimique suscipiantur in per. Cu vocibus ceteros sententiae mel. Nam te diam ornatus, mei sonet volutpat facilisis ut. Minim mazim persequeri</span>s sed id, mei et animal equidem, clita atomorum
  at has. <span class="green_mark mark">Ut noluisse placerat suscipiantur mel</span>, cu pri mundi dicunt <span class="green_mark mark">praesent. Ignota dicunt vulputate ad vim, </span>populo option aperiri <span class="orange_mark mark">me</span><span class="purple_mark mark">l in. Has cu essent eirmod malorum, nisl electram pri et.

In legimus posidonium his, aeque possit platonem vel ne, nam ad meis nemore delenit. Cu discere legimus eam. Eum eius nostro ad, pro solet semper per</span><span class="orange_mark mark">fe</span>cto ne, et eros dicam tantas pro. Ex malorum debitis cotidieque
  pro. Vel in legendos elaboraret conclusionemque, mutat moderatius cotidieque cu usu, mel copiosae assueverit ne. Odio imperdiet eos in, cum sint porro splendide ne, tritani aliquam eum ne. Mel feugiat recusabo platonem ei, sea cu numquam constituam.
  Ne tempor postea vim. Ad volumus accumsan apeirian has. At ius aliquid convenire, id est aliquip vivendo accusam. Solum scaevola ius ut, cum no mutat sadipscing. Mei te dico dolor scaevola, cu veri dictas sit, an per nullam oblique. Ex sit sale quidam
  reprehendunt, diam velit lucilius nam ne, mnesarchum efficiendi his ut. Nec vivendo mediocrem delicatissimi id, ad debet maiorum qui. No qui latine dolorum corpora, diam cetero insolens in cum.</span>

  <div id='change_color'>
    <div id='blue_box2' class='boxes2' title='Blue'></div>
    <div id='green_box2' class='boxes2' title='Green'></div>
    <div id='yellow_box2' class='boxes2' title='Yellow'></div>
    <div id='orange_box2' class='boxes2' title='Orange'></div>
    <div id='purple_box2' class='boxes2' title='Purple'></div>
    <div id='red_box2' class='boxes2' title='Red'></div>
  </div>