Question

如何使用主选择器中的$(this)形成子选择器？我为突出显示程序创建了这个。点击#red_box后，您可以更改原始精彩集锦的颜色（.green_mark）。

问题

我使用$(this)申请.green_mark而不是#red_box。

我尝试过的事情

我尝试在鼠标内部添加一个变量而不是函数，但在red_box点击功能之前：

var green_this = $(this);

然后我会在red_box点击功能中使用green_this。问题是，它会更改.green_mark's的所有。我只想更改此特定 .green_mark。

我该如何解决这个问题？

我的代码：

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

修改

当您鼠标悬停 .green_mark时，会出现一个div，包含 #red_box。为什么是这样？这个div允许你改变当前高光的颜色？我需要使用$(this)来仅指示这种类型的突出显示而不是所有相同颜色的实例。 .green_mark和#red_box没有父/子关系。他们唯一的关系是在select语句中。

编辑2

我不断收到HTML请求。我拒绝了，因为它只会使这个问题变得更复杂。但这是HTML：

注意： SO编辑器正在弄乱.green_mark的偏移效果。

＆＃13;

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

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

Answer 1

喜欢这个。

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

 });

但请注意，当鼠标悬停时，您会分配很多点击次数。你只需要一个

How to create click event handler inside mouseover event handler?

我想你可能想要这样做

＆＃13;

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

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

如何在子选择器中为子节点使用$（this）函数？

修改

编辑2

1 个答案: