Question

我试图将鼠标悬停在h1上，并在其id存储在h1值中的范围上触发发光效果。我有一个工作示例，说明发光如何与一个句子一起工作，但我不能让它与h1一起工作。我希望能够将鼠标悬停在其中一个h1上，并使相同颜色的方块发光。有人能告诉我哪里出错了吗？

＆＃13;

$(document).ready(function() {

  $("#verb").mouseenter(function() {
    $(".verb").addClass("hovered");
  });
  $("#verb").mouseleave(function() {
    $(".verb").removeClass("hovered");
  });

  $("#noun").mouseenter(function() {
    $(".noun").addClass("hovered");
  });
  $("#noun").mouseleave(function() {
    $(".noun").removeClass("hovered");
  });


  $("h1").mouseenter(function() {
    $("#".concat($(this).val())).addClass("hovered");
  });


});

＆＃13;

._21 {
  color: red !important
}

._106 {
  color: orange !important
}


/*glowing effect*/

#verb {
  color: blue
}

#noun {
  color: blue
}

.hovered {
  transition: text-shadow 0.1s linear;
  text-shadow: 0 0 3px blue;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p>
  <span id="verb">Verbs</span> &nbsp; - &nbsp; <span id="noun">Nouns</span>
</p>

I <span class="verb">like</span> 
to <span class="verb">ride</span> 
my <span class="noun">bicycle</span> 
every <span class="noun">day</span>
.
<br><br>

<h1 class="_21" value="red">
  Red
</h1>
<h1 class="_106" value="orange">
  Orange
</h1>

<p style="font-size: 28px">
  <span class="_21" id="red">■</span>
  <span class="_106" id="orange">■</span>
</p>

＆＃13;

Answer 1

通常使用+来连接JavaScript中的字符串而不是.concat()方法，尽管.concat()也会起作用。 +稍微简单一些，对于阅读代码的人来说会更熟悉。事实上，当我第一次查看你的代码时，我完全忘记了字符串有一个.concat()方法！

正如the MDN page for .concat()所述，+和+=也表现得更好，尽管在这种简单的情况下这无关紧要。

Patrick和Mikey指出，h1元素没有value，但您可以使用data-value代替。

对于一个简单的任务，比如打开或关闭一个类，你可以使用jQuery的.hover()的单参数版本，你可以在mouseenter和{{{{}}上调用一个函数。 1}}。

将它们放在一起，它可能看起来像这样：

mouseleave

$(document).ready(function() {

  $("#verb").hover( function() {
    $(".verb").toggleClass("hovered");
  });

  $("#noun").hover( function() {
    $(".noun").toggleClass("hovered");
  });

  $("h1").hover( function() {
    $( "#" + $(this).data('value') ).toggleClass("hovered");
  });

});

._21 {
  color: red !important
}

._106 {
  color: orange !important
}


/*glowing effect*/

#verb {
  color: blue
}

#noun {
  color: blue
}

.hovered {
  transition: text-shadow 0.1s linear;
  text-shadow: 0 0 3px blue;
}

JS：连接$（this）.val（）以获取id名称

1 个答案: